Javascript 随机选择所有表单字段值并填写表单-JS或jQuery-不确定是哪个

我有一个表格，为了测试，我想有一个按钮来自动填写每个组中随机的所有字段，对于复选框和收音机，只需从每个组类型的交易中随机选择一个。大多数表单都相当大，为了测试的目的，总是选择项目会让人很头疼

该表格的一个示例是：

<div class="rows"><b>Education</b><br>
<select name="edu" id="edu" validate="required:true"><option value="">Select One</option>
<option value="Some High School">Some High School</option>
<option value="High School graduate">High School graduate</option>
<option value="Some college">Some college</option>
<option value="College graduate">College graduate</option>
<option value="Master’s degree">Master’s degree</option>
<option value="Doctorate">Doctorate</option>
</select></div>

<div class="rows"><b>Payor status</b><br>
<select name="payor" id="payor" validate="required:true"><option value="">Select One</option>
<option value="Medicare/Medicaid">Medicare/Medicaid</option>
<option value="Insurance">Insurance</option>
<option value="Self Pay">Self Pay</option>
</select></div><br>

<div class="rows"><b>I am a physician.</b><br>
<input type="hidden" name="type33-8" value="YN">
<label><input type="radio" name="33-8" id="33Y" value="Yes" validate="required:true"> Yes</label> 
<label><input type="radio" name="33-8" id="33N" value="No"> No</label><br>
<label for="33-8" class="error">Please select an option</label></div><b>This doctor:</b><br>
<input type="hidden" name="type34" value="6PMultiple">

<div class="rows"><label>1.     Appears sincere.</label><br>
<input type="hidden" name="type34-247" value="6PMultiple">
<label><input type="radio" name="34-247" id="341" value="1" validate="required:true" > 1 - Very Strongly Disagree</label> 
<label><input type="radio" name="34-247" id="342" value="2" > 2 -  Strongly Disagree</label> 
<label><input type="radio" name="34-247" id="343" value="3" > 3 -  Disagree</label> 
<label><input type="radio" name="34-247" id="344" value="4" > 4 -  Agree</label> 
<label><input type="radio" name="34-247" id="345" value="5" > 5 -  Strongly Agree</label> 
<label><input type="radio" name="34-247" id="346" value="6" > 6 -  Very Strongly Agree</label></div>

<div class="rows"><label>2.     Is professional.</label><br>
<input type="hidden" name="type34-248" value="6PMultiple">
<label><input type="radio" name="34-248" id="341" value="1" validate="required:true" > 1 - Very Strongly Disagree</label> 
<label><input type="radio" name="34-248" id="342" value="2" > 2 -  Strongly Disagree</label> 
<label><input type="radio" name="34-248" id="343" value="3" > 3 -  Disagree</label> 
<label><input type="radio" name="34-248" id="344" value="4" > 4 -  Agree</label> 
<label><input type="radio" name="34-248" id="345" value="5" > 5 -  Strongly Agree</label> 
<label><input type="radio" name="34-248" id="346" value="6" > 6 -  Very Strongly Agree</label></div>

<div class="rows"><label>3.     Speaks clearly.</label><br>
<input type="hidden" name="type34-249" value="6PMultiple">
<label><input type="radio" name="34-249" id="341" value="1" validate="required:true" > 1 - Very Strongly Disagree</label> 
<label><input type="radio" name="34-249" id="342" value="2" > 2 -  Strongly Disagree</label> 
<label><input type="radio" name="34-249" id="343" value="3" > 3 -  Disagree</label> 
<label><input type="radio" name="34-249" id="344" value="4" > 4 -  Agree</label> 
<label><input type="radio" name="34-249" id="345" value="5" > 5 -  Strongly Agree</label> 
<label><input type="radio" name="34-249" id="346" value="6" > 6 -  Very Strongly Agree</label></div>

---

在获得选项计数后，使用返回的整数随机选择一个，我不知道这是否有效，因为我还没有测试它，因为我一直在解决单选问题。

对于单选按钮，您可以在“rows”div中循环，然后从那里获得子单选按钮：

$("div.rows").each(function () {
    var radios = $(this).find("input[type=radio]");
    if (radios.length > 0) {
        var randomnumber = Math.floor(Math.random() * radios.length);
        radios[randomnumber].checked = true;
    }
});

---

下面是我为您提出的一些jQuery：

$(function() {
    var radio_questions = $('div.rows');
    radio_questions.each(function() {
        var num_choices = $(this).find('input').length;
        var rand = getRandomIndex(1, num_choices - 1);
        $(this).find('input[value="' + rand + '"]').attr('checked', 'checked');
    });
});

function getRandomIndex(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

---

示例：

不幸的是，jQuery免费版本有点复杂。例如，你可以把所有的收音机组合在一起，然后从中随机选择

这也是一个比Reinder更通用的版本。它适用于任何类型的HTML

JS代码：

var radios = {};
var radionames = [];

var tmpname;
for ( var i=0; i < document.form1.elements.length; i++ ) {
    if ( document.form1.elements[i].type == "radio" ) {
        tmpname = document.form1.elements[i].name;
        if (! radios[tmpname]) {
            radios[tmpname] = [];
            radionames.push(tmpname);
        }
        radios[tmpname].push(i);
    }
}

var idx; 
for (var i=0; i < radionames.length; i++) {
    tmpname = radionames[i];
    idx = Math.floor(Math.random()*(radios[tmpname].length - 1));
    document.form1.elements[radios[tmpname][idx]].checked=true;
}

var-radios={}；
var radionames=[]；
var-tmpname；
对于（var i=0；i

​

---

另一方面，您的HTML无效，元素ID必须始终是唯一的标识符。

您想使用jQuery还是坚持使用原生JS？哪一种更简单：）

$(function() {
    var radio_questions = $('div.rows');
    radio_questions.each(function() {
        var num_choices = $(this).find('input').length;
        var rand = getRandomIndex(1, num_choices - 1);
        $(this).find('input[value="' + rand + '"]').attr('checked', 'checked');
    });
});

function getRandomIndex(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var radios = {};
var radionames = [];

var tmpname;
for ( var i=0; i < document.form1.elements.length; i++ ) {
    if ( document.form1.elements[i].type == "radio" ) {
        tmpname = document.form1.elements[i].name;
        if (! radios[tmpname]) {
            radios[tmpname] = [];
            radionames.push(tmpname);
        }
        radios[tmpname].push(i);
    }
}

var idx; 
for (var i=0; i < radionames.length; i++) {
    tmpname = radionames[i];
    idx = Math.floor(Math.random()*(radios[tmpname].length - 1));
    document.form1.elements[radios[tmpname][idx]].checked=true;
}