Question

你好，我想告诉你，我知道关于相同问题的堆栈溢出有很多已经解决的例子。但我的查询有点复杂，让我生病。我有大量的表包含10行9列我想要的只是当用户选中STROKE的NONE复选框时，从同一行中取消选中其他复选框。我必须为每一行执行此操作。如果选中其他复选框（用户可以检查多个父母，其他人，其他人等），则会取消选中无复选框。 查询问我。 我在过去的两天里尝试的相同，但可以在其中取得成功。请帮我提前致谢。

HEART NONE PARENT UNCLE / AUNT祖父母OTHERS
================================================== =============
STROKE enter image description here
ATTACK
B.P.

BLOOD NONE PARENT UNCLE / AUNT祖父母OTHERS
================================================== =============
ANEMIA enter image description here
免疫
LUKEMIA

Answer 1

对同一行使用相同的类。在每一行中，您可以给出不同的类名，并进一步相同。我给你一行样本。

＆＃13;

$(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);
});
}
});
});

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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取消选中同一行

5 个答案: