jQuery取消选中从同一行选中的另一个复选框答案

【问题标题】：jQuery Uncheck other checkbox on one checked from same rowjQuery取消选中从同一行选中的另一个复选框
【发布时间】：2017-07-27 04:47:44
【问题描述】：

你好
我想告诉你，我知道有很多关于相同问题的堆栈溢出解决示例。但是我的查询有点复杂，让我感到恶心。我有大量的表，其中包括10 行 9 列。我想要的只是当用户选中 STROKE 的 NONE 复选框时，其他复选框未选中同一行。我必须为每一行都做。如果选中其他复选框（用户可以选中多个 PARENT、UNCLE、OTHERS 等），NONE 复选框将取消选中。 如有疑问请咨询我。 我从过去 2 天开始尝试同样的方法，但可以成功。请帮我提前致谢。

心无父母叔叔/阿姨祖父母其他
================================================== ==============
中风 987654328 987654330
攻击 987654333 987654335
BP 987654338 987654340 @

血型无父母叔叔/阿姨祖父母其他
================================================== ==============
贫血 987654343 987654345
免疫 987654348 987654351 @
Lukemia 987654353 987654356 @

【问题讨论】：

@guradio，谢谢您的回复，但我必须检查来自父母、叔叔、祖父母、其他人的多个。您可以在其他列中说“无”或“多个”。
这是我必须完成的任务。实际上这是医疗表，假设用户需要填写一些与血液相关的表格，父母、祖父母和叔叔/阿姨受 LUKEMIA 影响，或者没有人受给定列影响。

标签： javascript jquery checkbox unchecked

【解决方案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>

【讨论】：

兄弟，我说过，我必须为每一行都这样做。正如我提到的“我有大量由 10 行和 9 列组成的表。”不能直接使用类名，我知道我应该使用 $("input:checkbox").each(function(){ 来控制每个复选框行。
你为同一行提供相同的类名，它适用于任何行数
我给你网址，你可以考虑一下然后codenomad.biz/ssa-agency/info
没有。您的逻辑使复选框功能类似于单选按钮，我无法检查父母，其他人，叔叔的多个复选框。
我明白你的期望..希望这会帮助你..检查更新的

【解决方案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>

【讨论】：

@Farhad...谢谢您的回复，我给您网址，您可以参考一下codenomad.biz/ssa-agency/info
感谢所有回复。

【解决方案3】：

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

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

【讨论】：

【解决方案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>

【讨论】：

@cardan，你很接近它，这个功能只有 1 行，我有 100 多行。，我怎么证明它是合理的。请在您的逻辑中添加更多想法。提前致谢。

【解决方案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>

【讨论】：