Question

我的HTML表单包含许多复选框组，我想检查是否从每个组中选择了至少一个复选框。

例如

// Group vehicle
<input type="checkbox" name="vehicle" value="Bike"/> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car"/> I have a car <br/>   

// Group language
<input type="checkbox" name="language" value="JS"/> I am JS Ninja <br/>
<input type="checkbox" name="language" value="Android"/> I am a droid <br/>

我可以使用以下Jquery选择器来检查是否至少选中了一个复选框

if($(":checkbox:checked[vehicle]").length) > 1
if($(":checkbox:checked[language]").length) > 1

但我必须为每个复选框组重复此选择器。我的页面包含许多复选框组。有没有其他方法可以在单个jquery选择器中选择所有复选框组？

谢谢！

Answer 1

即使逻辑似乎正确，我也无法使 b1naryj的解决方案工作。
我继续从他的例子开始研究它，最后让它发挥作用：

示例： http://jsfiddle.net/elclanrs/GFCKA/1/

<强> JQ：

var testCheckboxes = function(){
    var $checkboxes = $(':checkbox'),
        names = [],
        num = 0;
    $checkboxes.each(function(){
        var name = $(this).attr('name');
        if ($.inArray(name, names) === -1) {
            names.push(name);
        }
    });
    $.each(names, function(i, v){
        if ($checkboxes.filter('[name="'+v+'"]:checked').length >= 1) { num++; }
    });
    if (num === names.length) { alert('Yup!'); }
};

Answer 2

一旦我有时间完全测试原始示例代码，就按照承诺更新。我看到你们有点过火了，只需要对功能进行一些小的调整：D

通过不多次重复jQuery复选框选择器，我也提高了效率。

结果：

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        function checkedTest() {
            var nameArr = new Array();
            var finalResult = true;
            var allCheckboxes = $("input[type=checkbox]");

            // Put all the unique name attributes in an array.
            allCheckboxes.each(function(){
                var name = $(this).attr("name");
                if($.inArray(name, nameArr) == -1)
                    nameArr.push(name);
            });

            // Go through each name attribue and make sure at least one is checked.
            $.each(nameArr, function(index, value){
                if(allCheckboxes.filter("[name=" + value + "]:checked").length == 0)
                    finalResult = false;
            });

            return finalResult;
        }
    </script>
</head>
<body>
    Group1Box1: <input type="checkbox" id="group1Box1" name="group1"/>
    Group1Box2: <input type="checkbox" id="group1Box2" name="group1"/>
    <br/>
    Group2Box1: <input type="checkbox" id="group2Box1" name="group2"/>
    Group2Box2: <input type="checkbox" id="group2Box2" name="group2"/>
    <br/>
    Group3Box1: <input type="checkbox" id="group3Box1" name="group3"/>
    Group3Box2: <input type="checkbox" id="group3Box2" name="group3"/>
    <br/><br/>
    <input type="button" value="Test!" onclick="alert(checkedTest());"/>
</body>
</html>

Answer 3

// If you know the names just setting its here like var names = ["vehicle","language"]
var names = [];
// Find out the checkbox group names
$(":checkbox").each(function(){
  names.push(this.name);
});
names = $.unique(names);

var pass = true;
$.each(names, function(){
  if(!pass) return;
  pass = !!$("[name=" + this + "]:checkbox:checked").length;
});
alert("Pass? " + pass);

结帐HERE

Answer 4

我认为这对你有用：

$('.submit').click(function() {
    var vehicles= $("input[name='vehicle']").serializeArray(); 
      alert(vehicles.length + ' vehicles selected.');
    var languages = $("input[name='language']").serializeArray(); 
    alert(languages .length + ' languages  selected.');
});

然后您可以检查chkbx的长度。以下是您可以使用它的方法：

http://jsfiddle.net/WTudu/5/

如何找出Jquery中的复选框组

4 个答案: