jQuery 取消选中同一行选中的其他复选框

Question

你好
我想告诉你，我知道有很多关于堆栈溢出的已解决示例 issues.But 我的查询有点复杂，让我 sick.I有大量 table，由 10 行和 9 列组成。我想要的只是当用户选中 STROKE 的 NONE 复选框时，同一 row.I 中未选中的其他复选框必须对每一行执行此操作。如果选中其他复选框（用户可以选中多个 PARENT、UNCLE、OTHERS 等），NONE复选框将取消选中。 有问题问我 我从过去 2 天开始尝试同样的方法，但可以成功。请帮我提前致谢。

心 NONE PARENT UNCLE/AUNT GRANDPARENT 其他
================================================ =============
中风 = 攻击 = B.P。

[= 50 = 50 =]

BLOOD NONE PARENT UNCLE/AUNT GRANDPARENT 其他
================================================ =============
贫血 =[=5=][=] 免疫 =5=17=][ LUKEMIA =[=]

Answer 1

对相同的 row.In 每一行使用相同的 class 你可以给不同的 class 名称并进一步 same.I 给你一行样本。

$(function(){
$("input[type='checkbox']").click(function(){
if($(this).prop('checked') == true && $(this).attr('class')=='none'){

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='0'>
<tr><th>HEART</th><th>NONE</th><th>PARENT</th><th>UNCLE/AUNT</th><th>GRANDPARENT</th><th>OTHERS</th><tr>
<tr><td>STROKE</td><td><input type='checkbox' class='none'></td><td><input type='checkbox' class='stroke'></td><td><input type='checkbox' class='stroke'></td><td><input type='checkbox' class='stroke'></td><td><input type='checkbox' class='stroke'></td></tr>
<tr><td>ATTACK</td><td><input type='checkbox' class='none'></td><td><input type='checkbox' class='attack'></td><td><input type='checkbox' class='attack'></td><td><input type='checkbox' class='attack'></td><td><input type='checkbox' class='attack'></td></tr>
</table>

Answer 2

$(".checkAll").on("change",function(){
   if($(this).is(":checked")) 
   $(this).closest("tr").find(".check").prop('checked',true);
   else
    $(this).closest("tr").find(".check").prop('checked',false);

});

td:first-child{
background-color:yellow
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
 <tbody>
  <tr>
   <td><input type="checkbox" class="checkAll" />check All1</td>
   <td><input type="checkbox" class="check" />check 1</td>
   <td><input type="checkbox" class="check" />check 1</td>
  </tr>
  <tr>
   <td><input type="checkbox"  class="checkAll"  />check All2</td>
   <td><input type="checkbox"  class="check" />check 2</td>
   <td><input type="checkbox"  class="check"/>check 2</td>
  </tr>
 </tbody>
</table>

Answer 3

这会起作用 ;)

<div>
        <input type="checkbox" name="none" value="" id="none">
        <input type="checkbox" name="parent" value="" id="parent" class="otherThanNone">
        <input type="checkbox" name="uncle" value="" id="uncle" class="otherThanNone">
        <input type="checkbox" name="aunt" value="" id="aunt" class="otherThanNone">
    </div>
    <script>
        $(document).ready(function(){
            if($('#none').prop('checked')==false){
                $('#none').click(function(){
                    for(var i=0; i<3; ++i){
                        if($('.otherThanNone').eq(i).prop('checked')==true){
                            $('.otherThanNone').eq(i).prop('checked', false);
                        }
                    }
                });
            }
            $('#parent').click(function(){
                $('#none').prop('checked', false);
                console.log('a');
            });
        });
    </script>

Answer 4

    <!DOCTYPE html>
<html>
<head>
    <title>Checkbox selection</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<table>
    <tr>
        <th>HEART</th>
        <th>NONE</th>
        <th>PARENT</th>
        <th>UNCLE/AUNT</th>
        <th>GRANDPARENT</th>
        <th>OTHERS</th>
    </tr>

    <tr>
        <td>STROKE</td>
        <td class="strokeTD"><input type="checkbox" class="Strokeclass" name="heart"></td>
        <td class="strokeTD"><input type="checkbox" class="Strokeclass" name="none"></td>
        <td class="strokeTD"><input type="checkbox" class="Strokeclass" name="parent"></td>
        <td class="strokeTD"><input type="checkbox" class="Strokeclass" name="uncle"></td>
        <td class="strokeTD"><input type="checkbox" class="Strokeclass" name="grandparent"></td>
        <td class="strokeTD"><input type="checkbox" class="Strokeclass" name="others"></td>
    </tr>

    <tr>
        <td>ATTACK</td>
        <td class="attackTD"><input type="checkbox" class="Strokeclass" name="heart"></td>
        <td class="attackTD"><input type="checkbox" class="Strokeclass" name="none"></td>
        <td class="attackTD"><input type="checkbox" class="Strokeclass" name="parent"></td>
        <td class="attackTD"><input type="checkbox" class="Strokeclass" name="uncle"></td>
        <td class="attackTD"><input type="checkbox" class="Strokeclass" name="grandparent"></td>
        <td class="attackTD"><input type="checkbox" class="Strokeclass" name="others"></td>
    </tr>

    <tr>
        <td>B.P.</td>
        <td class="bpTD"><input type="checkbox" class="Strokeclass" name="heart"></td>
        <td class="bpTD"><input type="checkbox" class="Strokeclass" name="none"></td>
        <td class="bpTD"><input type="checkbox" class="Strokeclass" name="parent"></td>
        <td class="bpTD"><input type="checkbox" class="Strokeclass" name="uncle"></td>
        <td class="bpTD"><input type="checkbox" class="Strokeclass" name="grandparent"></td>
        <td class="bpTD"><input type="checkbox" class="Strokeclass" name="others"></td>
    </tr>
</table>

</body>
<script type="text/javascript">
    $(document).on('click','.Strokeclass',function(){

        var js_class = $(this).parent().attr('class');
        var js_slected = $(this).attr('name');

        if(js_slected == 'none')
        {
            $( '.'+js_class ).each(function( ) {
                if($(this).children().attr('name') != 'none')
                {$(this).children().prop('checked', false);}
            });
        }
        else if(js_slected == 'others')
        {
            $( '.'+js_class ).each(function( ) {
                if($(this).children().attr('name') == 'none')
                {$(this).children().prop('checked', false);}
            });
        }
    });
</script>
</html>

Answer 5

我的解决方案是取消选中所有最近的复选框并重新选中单击的复选框。（适用于表格）

<script>
    $(document).ready(function() {  
        $(':checkbox').on('change', function() {
            $(this).closest('tr').find(':checkbox').prop('checked', false);
            $(this).prop('checked', true);
          });  
   });
</script>

jQuery 取消选中同一行选中的其他复选框

jQuery Uncheck other checkbox on one checked from same row

javascript

checkbox

jquery

unchecked