Fatal编程技术网
  • jquery/
  • Jquery 检查是否选中了同一行中的复选框

Jquery 检查是否选中了同一行中的复选框

jquery checkbox

Jquery 检查是否选中了同一行中的复选框,jquery,checkbox,Jquery,Checkbox,我试图在选中同一行中的两个复选框时弹出一条错误消息/警报。我已经能够计算出复选框的总数，并且知道如何计算当前选中的复选框数量。我的每个复选框都有一个唯一的ID <body> <table id="tester"> <tr> <td width="100" id="A1" ><label><input type="checkbox" name="A" value=1 id="A1" /> A1</label><

我试图在选中同一行中的两个复选框时弹出一条错误消息/警报。我已经能够计算出复选框的总数，并且知道如何计算当前选中的复选框数量。我的每个复选框都有一个唯一的ID

<body>
<table id="tester">
<tr>
<td width="100" id="A1" ><label><input type="checkbox" name="A" value=1 id="A1" /> A1</label></td>
<td width="100" id="B1" ><label><input type="checkbox" name="B" value=1 id="B1" /> B1</label></td>
</tr>
<tr>
<td width="100" id="A2" ><label><input type="checkbox" name="A" value=1 id="A2" /> A2</label></td>
<td width="100" id="B2" ><label><input type="checkbox" name="B" value=1 id="B2" /> B2</label></td>
</tr>
</table>
    <input id="clickMe" type="button" value="clickme" onclick="test();" />
</body>
任何帮助都会很好，谢谢

您可以使用
。each（）
方法：

$('#tester tr').each(function(){
     var l = $(this).find('input[type=checkbox]:checked').length;
     if (l === 2) alert('2 checkboxes are checked');
});

$('#tester tr').has('input[type=checkbox]').filter(function() {
     return $(this).find('input[type=checkbox]:checked').length === 2;
}).addClass('error');
或
.filter（）
方法：

$('#tester tr').each(function(){
     var l = $(this).find('input[type=checkbox]:checked').length;
     if (l === 2) alert('2 checkboxes are checked');
});

$('#tester tr').has('input[type=checkbox]').filter(function() {
     return $(this).find('input[type=checkbox]:checked').length === 2;
}).addClass('error');
请注意，如果要阻止表单提交，则应在提交事件中验证表单元素，并应避免使用
警报
功能提供更好的用户体验

var $form = $('#tester'),
    $tr   = $form.has('input[type=checkbox]');

$tr.find('input[type=checkbox]').on('change', function() {
    var $tr = $(this).closest('tr'),
        checked = $tr.find('input[type=checkbox]:checked').length; 
    $tr.toggleClass('error', checked === 2);
});

$form.on('submit', function() {
    return $tr.filter('.error').length === 0;
});

您可以使用
。each（）
方法：

$('#tester tr').each(function(){
     var l = $(this).find('input[type=checkbox]:checked').length;
     if (l === 2) alert('2 checkboxes are checked');
});

$('#tester tr').has('input[type=checkbox]').filter(function() {
     return $(this).find('input[type=checkbox]:checked').length === 2;
}).addClass('error');
或
.filter（）
方法：

$('#tester tr').each(function(){
     var l = $(this).find('input[type=checkbox]:checked').length;
     if (l === 2) alert('2 checkboxes are checked');
});

$('#tester tr').has('input[type=checkbox]').filter(function() {
     return $(this).find('input[type=checkbox]:checked').length === 2;
}).addClass('error');
请注意，如果要阻止表单提交，则应在提交事件中验证表单元素，并应避免使用
警报
功能提供更好的用户体验

var $form = $('#tester'),
    $tr   = $form.has('input[type=checkbox]');

$tr.find('input[type=checkbox]').on('change', function() {
    var $tr = $(this).closest('tr'),
        checked = $tr.find('input[type=checkbox]:checked').length; 
    $tr.toggleClass('error', checked === 2);
});

$form.on('submit', function() {
    return $tr.filter('.error').length === 0;
});
单独处理每一行

 // for each row
 $("#tester tr").each(function(){
     var count = $(this).find("input:checked").length;
     console.log("There are "+count+" checked checkboxes");
 });
单独处理每一行

 // for each row
 $("#tester tr").each(function(){
     var count = $(this).find("input:checked").length;
     console.log("There are "+count+" checked checkboxes");
 });
怎么样

$(function () {
    $("#tester > tr").each(function () {
        if ($(this).children("input[type='checkbox']:checked").length > 1) {
            //more than one checkbox is checked
        }
    });
});
怎么样

$(function () {
    $("#tester > tr").each(function () {
        if ($(this).children("input[type='checkbox']:checked").length > 1) {
            //more than one checkbox is checked
        }
    });
});