javascript - 3 个复选框 1 独立于另一个需要 jquery 不将第一个作为集合的一部分

Question

我写了一个问题，在他们改变主意之前，答案确实满足业务需求。

Uncheck checkbox if checked with jquery

这段代码非常棒

$('input[type="checkbox"]').on('change', function () {
        $(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', false);
});

上面这段代码确实满足了当时的业务。

1. Must only allow for 1 of the 3 boxes to be checked. Out, Yes, No
2. Must allow for a second click on a checkbox to uncheck it so that NO checkboxes are selected.

如前所述，上面的代码非常适合需求!

但是，现在说 OUT 与 YES 和 NO 是分开的

<table>
        <tr>
            <td>
                 <input id="GridView1__ctl2_chkOut" type="checkbox" name="GridView1:_ctl2:chkOut" checked="checked">
            </td>
            <td>
                 <input id="GridView1__ctl2_chkYes2" type="checkbox" name="GridView1:_ctl2:chkYes2">
            </td>
            <td>
                <input id="GridView1__ctl2_chkNo2" type="checkbox" name="GridView1:_ctl2:chkNo2">
            </td>
        </tr>
</table>    

所以 3 个复选框规则是

1. Still can uncheck a box if selected.
2. Out (first checkbox) is independent of 2nd and 3rd YES and NO
3. Can Check 1st box and 2nd box , OR check 2nd box and 3rd box

所以现在当我看这个 jquery

$('input[type="checkbox"]').on('change', function () {
        // if checkbox equals ^Out  ...  Do allow for it to be checked if 
        //the yes or no is checked , and if checked, toggle to unchecked if clicked on
        $(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', false);
});

似乎逻辑现在变得复杂了，因为不能简单地查看下一个 tr 标签中最近的复选框。

Answer 1

您可以为每个复选框添加一个类或 ID(如果有多行则为类)，然后有两个更改函数来实现您的结果:

https://jsfiddle.net/1ad3Lupw/

$('.no').on('change', function () {
    $(this).closest('tr').find('.out').not(this).prop('checked', false);
});
$('.out').on('change', function () {
    $(this).closest('tr').find('.no').not(this).prop('checked', false);
});

在上面的示例中，out 和 yes 复选框可以一起选中，或者 yes 和 no 可以根据您的要求一起选中。您也可以取消选中这三个中的任何一个。