使用JQuery动态检查是否有多个单选按钮被检查

Question

我知道这个问题有很多相关的资源。 但是，我还需要一个完美的解决方案。

我动态生成了五个单选按钮组。 每组最多可容纳五个单选按钮。 我已经验证了“没有签到”和“至少一个签到的功能”作为一个单独的组。

我的问题是， 如何验证“是否已检查所有组”

对于ref：

我的代码下面：

var names = [];

$('input[type="radio"]').each(function() {
    // Creates an array with the names of all the different checkbox group.
    names[$(this).attr('name')] = true;
});

// Goes through all the names and make sure there's at least one checked.
for (name in names) {
    var radio_buttons = $("input[name='" + name + "']");
    if (radio_buttons.filter(':checked').length == 0) {
        alert('none checked in ' + name);
    } 
    else{
        // At least one checked
        var val = radio_buttons.val();
    }
}

检查完所有单选按钮组后，我需要重定向到其他页面。 它有点简单。 但是，对我来说看起来很复杂。

请帮忙。

更新我为前两个组生成的HTML。

    <div class="row">
    <div class="optionsContainer"><div id="ratingContainer">
    <ul class="0">
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="0" id="1"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="0" id="2"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="0" id="3"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="0" id="4"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="0" id="5"></div></li>
    </ul></div></div></div>

    <div class="row">
    <div class="optionsContainer"><div id="ratingContainer">
    <ul class="0">
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="1" id="1"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="1" id="2"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="1" id="3"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="1" id="4"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="1" id="5"></div></li>
    </ul></div></div></div>

注意：此处组名称单独更改。

Answer 1

变

<div id="ratingContainer">

至

<div class="ratingContainer"> 。

删除

onclick="checkThis(this);"

从html中，为所有输入元素添加了一个事件处理程序

elems.find("input").on("change", checkThis);

尝试

 var allChecked = false; var names = []; var elems = $(".0"); function checkThis(e) { var name = e.target.name; if (names.length < elems.length) { names.push(name); }; allChecked = elems.get().every(function(el, i) { return $(el).find(":checked").is("*") }); alert(name + " checked"); if (allChecked) { // do stuff alert(names.join(" and ") + " checked, " + "allChecked:" + allChecked); }; }; elems.find("input").on("change", checkThis); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="row"> <div class="optionsContainer"> <div class="ratingContainer"> <ul class="0"> <li> <div class="ui-radio"> <input type="radio" value="Strongly disagree" name="0" id="1"> </div> </li> <li> <div class="ui-radio"> <input type="radio" value="Disagree" name="0" id="2"> </div> </li> <li> <div class="ui-radio"> <input type="radio" value="Neutral" name="0" id="3"> </div> </li> <li> <div class="ui-radio"> <input type="radio" value="Agree" name="0" id="4"> </div> </li> <li> <div class="ui-radio"> <input type="radio" value="Strongly agree" name="0" id="5"> </div> </li> </ul> </div> </div> </div> <div class="row"> <div class="optionsContainer"> <div class="ratingContainer"> <ul class="0"> <li> <div class="ui-radio"> <input type="radio" value="Strongly disagree" name="1" id="1"> </div> </li> <li> <div class="ui-radio"> <input type="radio" value="Disagree" name="1" id="2"> </div> </li> <li> <div class="ui-radio"> <input type="radio" value="Neutral" name="1" id="3"> </div> </li> <li> <div class="ui-radio"> <input type="radio" value="Agree" name="1" id="4"> </div> </li> <li> <div class="ui-radio"> <input type="radio" value="Strongly agree" name="1" id="5"> </div> </li> </ul> </div> </div> </div> 

Answer 2

看起来你已经知道如何计算已检查的元素。 如果你把它放在第一个循环中，你可以标记一个变量false，如果有空的话。

var names = [];
var allChecked = true;

$('input[type="radio"]').each(function() {
    // Creates an array with the names of all the different checkbox group.
    names[$(this).attr('name')] = true;
    if $(this).filter(':checked').length === 0 {
        allChecked = false;
    }
});

Answer 3

https://jsfiddle.net/eu6L1f80/2/

使用Javascript：

$('form').on('submit', function(e) {
    e.preventDefault();

    var checkboxes = {};
    $(':checkbox').each(function() {
        checkboxes[$(this).attr('name')] = true;
    });

    $.each(checkboxes, function(i, val) {
        if($(':checkbox[name='+i+']').is(':checked')) delete checkboxes[i];
    });

    if (!Object.keys(checkboxes).length) {
        alert('success!');
    } else {
        alert('error!');
    }
});

HTML：

<form>
    <div>
        Group:
        <input type="checkbox" name="group1" value="" />
        <input type="checkbox" name="group1" value="" />
        <input type="checkbox" name="group1" value="" />
    </div>
    <div>
        Group:
        <input type="checkbox" name="group2" value="" />
        <input type="checkbox" name="group2" value="" />
        <input type="checkbox" name="group2" value="" />
    </div>
    <div>
        Group:
        <input type="checkbox" name="group3" value="" />
        <input type="checkbox" name="group3" value="" />
        <input type="checkbox" name="group3" value="" />
    </div>
    <button type="submit">Submit</button>
<form>