如何只勾选一个复选框答案

【问题标题】：How to make only one checkbox is checkable如何只勾选一个复选框
【发布时间】：2018-10-24 17:09:58
【问题描述】：

正如你下面的代码，我的复选框就像按钮。我想让它只有一个是可检查的。目前，复选框按钮在单击时会改变颜色，并且所有按钮都可以同时选中。

PS。我想让我的复选框按钮现在只能以相同的效果检查（当用户单击按钮时

 $('label.btn').on('click','input', function(){
     e.stopPropagation();

     $(this).attr('checked', !$(this).attr('checked'));
     $(e.target).closest('label').toggleClass('btn-flat');
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="col-4">
         <label class="btn btn-primary btn-block">
          <input type="checkbox" name="Categories" value="1" /> check1 </label>
</div>

     <div class="col-4">
     <label class="btn btn-primary btn-block">
      <input type="checkbox" name="Categories" value="1" /> check1 </label>
</div>

请帮我解决这个简单的问题。谢谢

【问题讨论】：

为什么不能使用单选按钮？
HTML checkbox - allow to check only one checkbox的可能重复

标签： jquery html checkbox

【解决方案1】：

所以基本上你想要一个单选按钮。你可以使用这样的东西：

<div>
    <label >
    <input type="radio" name="Categories" value="1" /> check1 </label>
    <label >
    <input type="radio" name="Categories" value="2" /> check2 </label>`
</div>

More info on radio buttons

【讨论】：

【解决方案2】：

您不想使用单选按钮吗？

input[type="radio"].square {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox; 
  -ms-appearance: checkbox; 
}

<form>
  <label><input type="radio" name="group1"/>check1</label>
  <label><input type="radio" name="group1"/>check2</label>
  <br/><br/>
  Checkbox style:<br/>
  <label><input class="square" type="radio" name="group2"/>check3</label>
  <label><input class="square" type="radio" name="group2"/>check4</label>
</form>

【讨论】：

【解决方案3】：

你可以用javascript处理

$('label.btn').on('click','input', function(e){
   e.stopPropagation();

   var elms = document.querySelectorAll("input");
   for(var i =0; i< elms.length ; i++){
      if(e.target !== elms[i]){
         elms[i].checked = false;
      }
   }

   $(e.target).closest('label').toggleClass('btn-flat');
 });

【讨论】：

【解决方案4】：

这是一种方法，如果您绝对必须使用复选框而不是单选按钮。

$('label.btn').on('click', 'input', function(e) {
  e.stopPropagation();
  
  //only consider manipulating other elements if this one was checked
  if (e.target.checked) {
    //find all the other checkboxes with the same name
    var $selectedDuplicates = $(':checkbox').filter('[name="'+ e.target.name +'"]').not(e.target);
    
    //uncheck the other checkboxes
    $selectedDuplicates.prop('checked', false);
    //remove their parent class
    $selectedDuplicates.closest('label').removeClass('btn-flat');
  }
  
  //toggle the parent class on this checkbox's label
  $(e.target).closest('label').toggleClass('btn-flat');
});

.btn-flat {
  background-color:rgb(200, 200, 200);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-4">
  <label class="btn btn-primary btn-block">
      <input type="checkbox" name="Categories" value="1" /> check1
  </label>`
</div>

<div class="col-4">
  <label class="btn btn-primary btn-block">
      <input type="checkbox" name="Categories" value="1" /> check1
  </label>
</div>

【讨论】：