65

我总共有 6 个复选框（将来可能会添加更多），我想只允许选择一个，因此当用户选中其中任何一个时，其他应该未选中。

如果我定义了 ID，我尝试使用此代码并且工作正常，但现在只是想知道如何以有效的方式使其反之亦然，因此将来如果我添加更多内容将不会成为问题

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

仅供参考，复选框不是同级的，并且是不同的<td>

4

7 回答 7

182

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

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

这是一个小提琴

于 2013-07-22T10:31:57.347 回答
15

您可以为所有复选框使用类，并执行以下操作：

$(".check_class").click(function() {
  $(".check_class").attr("checked", false); //uncheck all checkboxes
  $(this).attr("checked", true);  //check the clicked one
});
于 2013-07-22T10:20:00.320 回答
5

试试这个

 $(function() { 
  $('input[type="checkbox"]').bind('click',function() {
    $('input[type="checkbox"]').not(this).prop("checked", false);
  });
});
于 2013-07-22T10:28:34.127 回答
2

如果复选框是在循环中生成的，我想添加一个答案。例如，如果您的结构是这样的（假设您在 上使用服务器端构造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/

于 2020-03-02T12:31:32.010 回答
1

试试这个

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

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

修改的...

于 2013-07-22T10:22:39.367 回答
1 
$('.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');
});
于 2016-10-26T06:20:24.573 回答
0

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

于 2013-07-22T10:26:25.370 回答