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

Question

你好
我想告诉你，我知道在stackoverflow上有很多关于相同问题的解决示例。但我的问题有点复杂，让我感到困扰。我有大量包含10行9列的表格。 我想要的是，当用户为STROKE勾选“NONE”复选框时，同一行中的其他复选框都取消勾选。我必须对每一行都这样做。 如果勾选了其他复选框（用户可以勾选多个，如PARENT、UNCLE、OTHERS等），NONE 复选框将取消勾选。 如果有问题，请问我。 我已经尝试了两天以上，但没有成功。 请帮帮我 提前致谢。

心脏     无       父母       叔/姑       祖父母      其他
===============================================================
中风                                                                                                
心脏病发作                                                                                         
血压                                                                                                 

BLOOD     NONE     PARENT     UNCLE/AUNT     GRANDPARENT    OTHERS
===============================================================
ANEMIA                                                                                            
IMMUNE                                                                                           
LUKEMIA                                                                                           

- Boyka

---

@guradio，谢谢您的回复，但我需要检查来自父母、叔叔、祖父母和其他人的多个选项。您可以说其他列中没有或有多个选项。 - Boyka

这是我要完成的任务。实际上，这是医学表格，假设用户需要填写一些与血液有关的表格，父母、祖父母和叔伯阿姨是否患有白血病或没有在给定的列中受到影响。 - Boyka

Answer 1

在同一行中使用相同的类。在每一行中，您可以给出不同的类名并进一步执行相同的操作。我已经给出了一个样本行。

$(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>

- lalithkumar

---

兄弟，我说过了，我必须为每一行都这样做。就像我提到的那样，“我有很多包含10行9列的表格”，不能直接使用类名，我知道我应该使用 $("input:checkbox").each(function(){ 来控制每个复选框行。 - Boyka

给同一行赋相同的类名，它将适用于任意数量的行。 - lalithkumar

让我给你URL，你可以了解一下： http://www.codenomad.biz/ssa-agency/info/ - Boyka

你的逻辑让复选框的功能像单选按钮一样，我无法从父复选框、其他复选框或叔复选框中选择多个复选框。 - Boyka

我理解你的期望了，希望这可以帮到你。请检查更新后的版本。 - lalithkumar

@lalith...我做到了...你也可以做到。 :) 谢谢 - Boyka

Answer 2

我的解决方案是取消所有最近的复选框，然后重新选中被点击的那个。（适用于表格）

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

- Dan Walters

Answer 3

$(".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>

- Farhad Bagherlo

---

@Farhad...感谢您的回复，让我给您URL，您可以了解一下codenomad.biz/ssa-agency/info。 - Boyka

感谢所有的回复。 - Boyka

Answer 4

这将有效 ;)

<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>

- Vardan

---

@cardan，你很接近了，这个功能只适用于1行，而我有100多行。我该如何证明它的合理性？请在你的逻辑中加入更多的想法。提前致谢。 - Boyka

Answer 5

    <!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>

- Yogendrasinh

Answer 6

$(".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>

- darshan invorg

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community