选中另一个复选框时取消选中一个复选框答案

【问题标题】：Uncheck a checkbox when another is checked选中另一个复选框时取消选中一个复选框
【发布时间】：2018-04-15 18:51:17
【问题描述】：

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 时，测试未被选中。但是当我再次按下测试时，测试复选框拒绝检查，除非我手动取消选中 notTest。

我包含了sn-p的代码，请问有什么问题吗？

代码在 Wordpress 上正常运行，但不幸的是这里没有。

【问题讨论】：

"message": "SyntaxError: expected expression, got '<'", - 您的代码 sn-p 不可执行，请勿将其设为代码 sn-p - 或删除 javascript 面板中的 HTML
你知道为什么会出现这个 SyntaxError，建议采纳，sn-p 已删除
因为您将<script> 放在了javascript 框中
好的，谢谢，下次我用在线js编辑器的时候就不用了

标签： javascript jquery wordpress checkbox

【解决方案1】：

给你一个解决方案

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

希望这会对你有所帮助。

【讨论】：

if 语句是多余的。永远都是真的。
@guymograbi if 声明不是多余的，现在检查控制台，我已经为你编辑了答案。

【解决方案2】：

你可以这样编码，

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

工作演示url

希望这会对你有所帮助。

【讨论】：

感谢 Sunil 的解决方案，我只想要 5 个复选框中的 2 个，而不是全部，我会使用单选按钮，我希望用户选择多个复选框，但他不能具体选择在 2 个特定的之间，所以我需要处理 id 而不是类
抱歉，您提供的演示与您的回答没有共同之处。

【解决方案3】：

但是当我再次按下测试时，测试复选框拒绝 chech 除非我手动取消选中 notTest。

这是因为当你再次按下时，你没有勾选你点击的是哪个复选框。 你只是取消了选中的复选框。

试试这个简单的方法

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>

【讨论】：

感谢gurvinder的解决方案和解释

【解决方案4】：

试试这个。

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

您必须知道哪个元素触发了事件才能正确解决它。

解决此问题的一种方法是我在上面显示的函数 - 只需将所有复选框标记为 false，然后将触发事件的元素 this 标记为 true。

【讨论】：