[英]Uncheck a checkbox when another is checked
function uncheck() {
var notTest = document.getElementById("choice_31_3_2");
var Test = document.getElementById("choice_31_3_1");
if (notTest.checked) {
Test.checked = false;
}
if (Test.checked) {
notTest.checked = false;
}
}
jQuery("#choice_31_3_1").click(uncheck);
jQuery("#choice_31_3_2").click(uncheck);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="input_3.1" value="Test" id="choice_31_3_1" type="checkbox">
<label for="choice_31_3_1" id="label_31_3_1">Test</label>
<input name="input_3.2" value="notTest" id="choice_31_3_2" type="checkbox">
<label for="choice_31_3_2" id="label_31_3_2">notTest</label>
I wrote a function to uncheck a checkbox if another one is checked, I am using jQuery to call uncheck() on those specific input. 我编写了一个函数来取消选中一个复选框(如果选中了另一个复选框),我使用jQuery在这些特定输入上调用uncheck()。
I am getting the result I want. 我得到了想要的结果。 When I check test then check notTest, Test is being unchecked.
当我检查测试然后检查notTest时,未选中测试。 BUT when I am pressing Test again, the test checkbox is refusing to check unless I manually uncheck notTest.
但是,当我再次按下Test时,除非我手动取消选中notTest,否则测试复选框将拒绝检查。
I included the code snippet , please can figure out what is wrong ? 我包含了代码片段,请找出错误的地方吗?
The code is running normally on Wordpress but unfortunately not here. 该代码在Wordpress上正常运行,但不幸的是不在此处运行。
BUT when i am pressing Test again, the test checkbox is refusing to chech unless i manually uncheck notTest.
但是,当我再次按下Test时,除非我手动取消选中notTest,否则测试复选框将拒绝进行检查。
It is because when you press again, you didn't check which checkbox you have clicked on . 这是因为当您再次按下时, 您没有检查单击的复选框 。 You simply unchecked a checked-checkbox .
您只需取消选中一个checked-checkbox 。
Try this simple approach 试试这个简单的方法
var allIds = [ "choice_31_3_1", "choice_31_3_2" ]; function uncheck( event ) { var id = event.target.id; allIds.forEach( function( id ){ if ( id != event.target.id ) { document.getElementById( id ).checked = false; } }); } jQuery("#choice_31_3_1").click(uncheck); jQuery("#choice_31_3_2").click(uncheck);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="input_3.1" value="Test" id="choice_31_3_1" type="checkbox"> <label for="choice_31_3_1" id="label_31_3_1">Test</label> <input name="input_3.2" value="notTest" id="choice_31_3_2" type="checkbox"> <label for="choice_31_3_2" id="label_31_3_2">notTest</label>
Here you go with a solution 在这里你有一个解决方案
$('input[type="checkbox"]').change(function(){ console.log($(this).is(':checked')); if($(this).is(':checked')){ $(this).siblings('input[type="checkbox"]').attr('checked', false); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="input_3.1" value="Test" id="choice_31_3_1" type="checkbox"> <label for="choice_31_3_1" id="label_31_3_1">Test</label> <input name="input_3.2" value="notTest" id="choice_31_3_2" type="checkbox"> <label for="choice_31_3_2" id="label_31_3_2">notTest</label>
Hope this will help you. 希望这会帮助你。
Try this. 尝试这个。
$('input.test').on('change', function() { $('input.test').not(this).prop('checked', false); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="input_3.1" value="Test" id="choice_31_3_1" type="checkbox" class="test"> <label for="choice_31_3_1" id="label_31_3_1">Test</label> <input name="input_3.2" value="notTest" id="choice_31_3_2" type="checkbox" class="test"> <label for="choice_31_3_2" id="label_31_3_2">notTest</label>
You can code like this, 你可以这样写
HTML:-
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
JQUERY:-
$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);
});
Hope this will help you. 希望这会帮助你。
https://plnkr.co/edit/o7dft84Cm4tA3GUOLt4y?p=preview https://plnkr.co/edit/o7dft84Cm4tA3GUOLt4y?p=preview
function uncheck() {
if (this.checked){ // support unchecking
$('input').prop('checked',false);
this.checked = true
}
}
You have to know which element triggered the event in order to solve it properly. 您必须知道哪个元素触发了事件才能正确解决它。
One way to solve it is the function I show above - simply mark all checkboxes to false, then mark this
- the element that triggered the event - to true. 解决这个问题的方法之一是我上面显示的功能-只需标记所有复选框为false,则标志着
this
-真-触发事件的元素。
Using JS: Change your function to this: 使用JS:将函数更改为此:
$(function(){
function uncheck(e) {
var isElemChecked = e.target.checked;
// Return if the element was being unchecked
if(!isElemChecked){
return;
}
$('input').prop('checked',!isElemChecked);
$(e.target).prop('checked',isElemChecked);
}
jQuery("#choice_31_3_1").click(uncheck);
jQuery("#choice_31_3_2").click(uncheck);
})
Using CSS (no need for JS code): Change your inputs to type=radio
and update the css as 使用CSS(不需要JS代码):将输入更改为
type=radio
并将CSS更新为
input[type="radio"] {
-webkit-appearance: checkbox; /* Chrome, Safari, Opera */
-moz-appearance: checkbox; /* Firefox */
}
<input name="input_3" value="Test" id="choice_31_3_1" type="radio">
<label for="choice_31_3_1" id="label_31_3_1">Test</label>
<input name="input_3" value="notTest" id="choice_31_3_2" type="radio">
<label for="choice_31_3_2" id="label_31_3_2">notTest</label>
Please note CSS approach would not work on IE. 请注意CSS方法在IE上不起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.