当另一个复选框被选中时取消选中一个复选框

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()。

我得到了我想要的结果。当我检查 test 然后检查 notTest 时，Test 未被选中。但是当我再次按下测试时，测试复选框拒绝检查，除非我手动取消选中 notTest。

我包含了代码片段，请找出问题所在？

该代码在 Wordpress 上正常运行，但不幸的是不在此处。

Answer 1

但是，当我再次按“测试”时，测试复选框将拒绝检查，除非我手动取消选中“不测试”。

这是因为当你再次按下时，你没有检查你点击的是哪个复选框。您只需取消选中选中的复选框即可。

尝试这个简单的方法

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>