如何一次选中一个复选框，并在单击另一个复选框时将选中状态切换为未选中状态？ [复制]答案

【问题标题】：How to make one checbox checked at a time and to toggle the checked to unchecked when other checkbox is clicked? [duplicate]如何一次选中一个复选框，并在单击另一个复选框时将选中状态切换为未选中状态？ [复制]
【发布时间】：2014-07-13 23:42:03
【问题描述】：

如何使复选框在单击一个时单击，而另一个应取消选中。单击复选框一时，应将其标记为选中，单击复选框二时，应将其标记为已选中，其余均应标记为未选中。

我的代码如下：

<div class="feedback-quest3">
    <label class="checkbox ques3" for="ques3-cbox1">
        <input type="checkbox" value="" id="ques3-cbox1" data-toggle="checkbox">
        1-2 
    </label>
    <label class="checkbox ques3" for="ques3-cbox2">
        <input type="checkbox" value="" id="ques3-cbox2" data-toggle="checkbox">
        2-3 
    </label>
    <label class="checkbox ques3" for="ques3-cbox3">
        <input type="checkbox" value="" id="ques3-cbox3" data-toggle="checkbox">
        3-4 
    </label>
</div>

【问题讨论】：

为什么不能使用单选按钮？这正是它们的设计目的。
听起来你想要一个单选按钮，而不是一个复选框
是的，我知道，但在我的项目中，他们需要这种方式仅意味着用户应该只能单击一个类似于单选按钮的复选框功能。
您需要了解 UX，当我作为用户看到复选框时，意味着我可以选择其中一个或多个
你只认为你想要一组互斥的复选框。您真正想要的是单选按钮（您可以随时更改它们的外观和感觉）。

标签： javascript jquery html checkbox

【解决方案1】：

查看DEMO

Javascript

function attach(element,listener,ev,tf){    
  if(element.attachEvent)    
      element.attachEvent("on"+listener,ev);    
  else    
    element.addEventListener(listener,ev,tf);
}

var parent = document.getElementById('parentElement');
var checkboxes = parent.getElementsByTagName('input');

if(checkboxes.length>0){        
    for(var i=0;i<checkboxes.length;i++){            
       attach(checkboxes[i],'click',function(event){        
          var evt = event || window.event;
          var target = evt.target || evt.srcElement;       
          for(var y=0;y<checkboxes.length;y++){             
            checkboxes[y].checked = false;                   
          }    
          target.checked = true;        
       }, false);            
    }
}

【讨论】：

【解决方案2】：

$(".feedback-quest3 :checkbox").on("change", function(){
  $(".feedback-quest3 :checkbox").not($(this)).prop("checked",false);
});

【讨论】：

【解决方案3】：

然后，试试这个：

$(".feedback-quest3 :checkbox").each(function(){
  $(".feedback-quest3 :checkbox").on("change",function(){
     $(".feedback-quest3 :checkbox").prop("checked",false);
     $(this).prop("checked",true);
  });
});

【讨论】：