如何从两列中匹配标记复选框

本文关键字:复选框 两列 | 更新日期: 2023-09-27 18:29:13

我正在尝试像一样从两侧匹配复选框检查值

chkLastFirst         chkThisFirst 
chkLastSecond        chkThisSecond 
chkLastThird         chkThisThird
chkLastFour          chkThisFour

记住两列复选框的文本值是一样的,

First    First
Second   Second
Third    Third
Four     Four

现在我想知道第二列的复选框被选中了"chkThisFirst",所以第一列的复选复选框也被选中了吗?"chkLastFirst"是否匹配第二列复选框和第一列复选框?

简单地说,如果我在第二列中标记了2个复选框,那么第一列中的同一复选框是否被标记,或者第一列中有多少复选框被标记超出了第二列的标记复选框

希望你站在立场下,如果不是,那么问我希望你的建议

感谢

如何从两列中匹配标记复选框

注意:其他海报解决方案可能更好,但使用此代码作为参考,您应该能够提出自己的解决方案。

$(function () {
$('#column2 input[type=checkbox]').change(function () {
    if ($(this).is(':checked')) {
        var $matchingBox = $('#column1 input[value=' + $(this).val() + ']');
        if ($matchingBox.is(':checked')) {
            alert('Yep, box' + $matchingBox.parent('label').text() + ' is checked!');
        }
    }
});
});

链接到Fiddle

使用name属性对它们进行分组,即

 <input type="checkbox"  name="first"/> <input type="checkbox" 
 name="first"/>
 <input type="checkbox"  name="second"/> <input type="checkbox" 
 name="second"/>

然后使用JS/JQuery,当一个被点击时,获取组中的另一个,看看它是否被选中。

这是我的JsFiddle实现http://jsfiddle.net/CbsGN/

$(document).ready(function() {
    $("td:nth-child(2) input[type='checkbox']").on('click',function() {
        var nameValue = $(this).attr('name');
        var groupItems = $("[name ='" + nameValue + "']");
        if($(groupItems[1]).is(":checked"))
        {        
            alert($(groupItems[0]).is(":checked"));
        }
    });
});