Question

我总共有6个复选框（将来可能会添加更多）并且我想只允许选择一个，所以当用户选中其中任何一个时，其他选项应该取消选中。

我尝试使用此代码并且如果我定义了ID，但现在只是想知道如何以有效的方式使其反之亦然，以便将来如果我添加更多而不是一个问题

$('#type1').click(function() {
     $('#type2').not('#type1').removeAttr('checked');
});

仅供参考，复选框不是兄弟，而是<td>

Answer 1

绑定一个change处理程序，然后取消选中除了选中的复选框之外的所有复选框：

$('input.example').on('change', function() {
    $('input.example').not(this).prop('checked', false);  
});

Here's a fiddle

Answer 2

您可以在所有复选框中使用类，并执行：

$(".check_class").click(function() {
  $(".check_class").attr("checked", false); //uncheck all checkboxes
  $(this).attr("checked", true);  //check the clicked one
});

Answer 3

试试这个

 $(function() { 
  $('input[type="checkbox"]').bind('click',function() {
    $('input[type="checkbox"]').not(this).prop("checked", false);
  });
});

Answer 4

如果要在循环中生成复选框，我想添加一个答案。例如，如果您的结构是这样的（假设您正在View上使用服务器端构造，例如foreach循环）：

<li id="checkboxlist" class="list-group-item card">
  <div class="checkbox checkbox-inline">
    <label><input type="checkbox" id="checkbox1">Checkbox 1</label>
    <label><input type="checkbox" id="checkbox2">Checkbox 2</label>
  </div>
</li>

<li id="checkboxlist" class="list-group-item card">
  <div class="checkbox checkbox-inline">
    <label><input type="checkbox" id="checkbox1">Checkbox 1</label>
    <label><input type="checkbox" id="checkbox2">Checkbox 2</label>
  </div>
</li>

对应的Jquery：

$(".list-group-item").each(function (i, li) {
  var currentli = $(li);
  $(currentli).find("#checkbox1").on('change', function () {
       $(currentli).find("#checkbox2").not(this).prop('checked',false);
  });

  $(currentli).find("#checkbox2").on('change', function () {
       $(currentli).find("#checkbox1").not(this).prop('checked', false);
  });
});

正在运行的演示：https://jsfiddle.net/gr67qk20/

Answer 5

试试这个

$("[id*='type']").click(
function () {
var isCheckboxChecked = this.checked;
$("[id*='type']").attr('checked', false);
this.checked = isCheckboxChecked;
});

为了使它更通用，您还可以通过在它们上实现的公共类找到复选框。

...改性

Answer 6

我认为prop方法在布尔属性方面更方便。 http://api.jquery.com/prop/

Answer 7

$('.cw2').change(function () {
    if ($('input.cw2').filter(':checked').length >= 1) {
        $('input.cw2').not(this).prop('checked', false);
    } 
});


$('td, input').prop(function (){
    $(this).css({ 'background-color': '#DFD8D1' });
    $(this).addClass('changed');
});

jQuery：取消选中一个选中的其他复选框

7 个答案:

Here's a fiddle