選中另一個復選框后，取消選中該復選框

Question

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>

我編寫了一個函數來取消選中一個復選框（如果選中了另一個復選框），我使用jQuery在這些特定輸入上調用uncheck（）。

我得到了想要的結果。 當我檢查測試然后檢查notTest時，未選中測試。 但是，當我再次按下Test時，除非我手動取消選中notTest，否則測試復選框將拒絕檢查。

我包含了代碼片段，請找出錯誤的地方嗎？

該代碼在Wordpress上正常運行，但不幸的是不在此處運行。

Answer 1

但是，當我再次按下Test時，除非我手動取消選中notTest，否則測試復選框將拒絕進行檢查。

這是因為當您再次按下時， 您沒有檢查單擊的復選框 。 您只需取消選中一個checked-checkbox 。

試試這個簡單的方法

 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> 

Answer 2

在這里你有一個解決方案

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

希望這會幫助你。

Answer 3

嘗試這個。

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

Answer 4

你可以這樣寫

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

工作演示網址

希望這會幫助你。

Answer 5

https://plnkr.co/edit/o7dft84Cm4tA3GUOLt4y?p=preview

 function uncheck() {
    if (this.checked){ // support unchecking
     $('input').prop('checked',false);
     this.checked = true
    }
  }

您必須知道哪個元素觸發了事件才能正確解決它。

解決這個問題的方法之一是我上面顯示的功能-只需標記所有復選框為false，則標志着this -真-觸發事件的元素。

Answer 6

使用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);
})

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

請注意CSS方法在IE上不起作用。