jQuery 取消選中從同一行選中的另一個復選框
[英]jQuery Uncheck other checkbox on one checked from same row
問題描述
你好
我想告訴你，我知道有很多關於相同問題的堆棧溢出解決示例。但是我的查詢有點復雜，讓我感到惡心。我有大量由 10 行和 9 列組成的表。 我想要的只是當用戶選中 STROKE 的 NONE 復選框時，其他復選框未選中同一行。我必須為每一行都做。 如果選中了其他復選框（用戶可以選中多個 PARENT、UNCLE、OTHERS 等），則不會選中NONE復選框。 如果有疑問問我。 我從過去 2 天開始嘗試同樣的方法，但可以成功。 請幫助我提前謝謝。
心 無 父母 叔叔/阿姨 祖父母 其他
==================================================== ==============
中風
攻擊
英國石油公司
無血 父母 叔叔/阿姨 祖父母 其他
==================================================== ==============
貧血
免疫
盧克米亞
6 個解決方案
解決方案1
4 已采納 2017-07-27 04:57:29
對同一行使用相同的類。在每一行中，您可以給出不同的類名，並進一步相同。我給你一行樣本。
$(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>
解決方案2
2 2018-02-06 11:05:07
我的解決方案是取消選中所有最近的復選框，然后重新檢查單擊的復選框。 （適用於表格）
<script>
$(document).ready(function() {
$(':checkbox').on('change', function() {
$(this).closest('tr').find(':checkbox').prop('checked', false);
$(this).prop('checked', true);
});
});
</script>
解決方案3
1 2017-07-27 05:01:19
$(".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>
解決方案4
1 2017-07-27 05:33:41
這將工作;）
<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>
解決方案5
1 2017-07-27 13:24:02
<!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>
解決方案6
0 2022-07-25 04:02:37
$(".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>
jQuery邏輯問題。 如果選中了其他復選框，則需要取消選中它，反之亦然
[英]Problem with jQuery logic. Need to uncheck one checkbox if other is checked, vice versa
如果選中了一個復選框，請取消選中另一個復選框，然后顯示/隱藏HTML代碼
[英]If one checkbox is checked, uncheck the other and show/hide HTML code
當組中的一個復選框被選中時，禁用並取消選中所有其他復選框
[英]When one checkbox is checked in a group, disable & uncheck all other checkboxes
復選框，如單選按鈕，僅限於一個選擇，取消選中是否選中其他復選框
[英]Checkbox like radio button, limit to only one selection, uncheck if other checkbox is checked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.