如果选中一个复选框，如何取消选中所有复选框？

Question

我有一组复选框，如下所示：

<label class="checkbox-inline">
  <input type="checkbox" id="" value="1"> information
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="" value="2"> information
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="" value="3"> information
</label>        
<label class="checkbox-inline">
  <input type="checkbox" id="" value="4"> any
</label>

使用这些复选框，用户可以进行选择。但是，如果用户选择了 "any" 复选框，那么我需要取消选择所有其他选择。

我尝试过类似的方法，但它对我不起作用。

$('.checkbox-inline').click(function(){
      $("input[type='checkbox']").attr('checked', false);
      $(this).attr('checked', true);
})

谁能告诉我如何在 jquery 中做到这一点？

注意：我正在为我的复选框使用动态生成的 HTML。

Answer 1

将id 定义为任意checkbox，如下所示：

<label class="checkbox-inline">
  <input type="checkbox" id="" value="1"> information
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="" value="2"> information
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="" value="3"> information
</label>        
<label class="checkbox-inline">
  <input type="checkbox" id="any-checkbox" value="4"> any
</label>

我建议这样做是因为使用它是第四个事实并不是一个好主意。如果你以后在它之前添加另一个复选框，那么它将不再是第四个。

    //We use .on to tackle with the dynamic nature of the HTML
    $( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
        if ($(this).attr("id") === "any-checkbox") { //Any checkbox tick
            if ($(this).prop("checked")) { //User checked any
                //Other checkboxes are unchecked
                $(".checkbox-inline > input[type=checkbox]:not(#any-checkbox)").prop("checked", false)
            }
        } else { //Other checkbox tick
            if ($(this).prop("checked")) {//User checked another checkbox
                //Any checkbox is unchecked
                $("#any-checkbox").prop("checked", false);
            }
        }
    });

编辑：根据评论，我已经解决了多个组的问题，如下所示：

<label class="checkbox-inline">
  <input type="checkbox" id="" name="hairColor" value="1"> information
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="" name="hairColor" value="2"> information
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="" name="hairColor" value="3"> information
</label>        
<label class="checkbox-inline">
  <input type="checkbox" id="hairColor" name="hairColor" value="4" class="any"> any
</label>
   <br> 
<label class="checkbox-inline">
  <input type="checkbox" id="" name="eyeColor" value="1"> eyeColor
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="" name="eyeColor" value="2"> eyeColor
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="" name="eyeColor" value="3"> eyeColor
</label>        
<label class="checkbox-inline">
  <input type="checkbox" id="eyeColor" name="eyeColor" class="any" value="4"> any
</label>

//We use .on to tackle with the dynamic nature of the HTML
$( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
    if ($(this).hasClass("any")) { //Any checkbox tick
        if ($(this).prop("checked")) { //User checked any
            //Other checkboxes are unchecked
            $(".checkbox-inline > input[type=checkbox][name=" + $(this).attr("name") + "]:not(.any)").prop("checked", false)
        }
    } else { //Other checkbox tick
        if ($(this).prop("checked")) {//User checked another checkbox
            //Any checkbox is unchecked
            $("[name=" + $(this).attr("name") + "].any").prop("checked", false);
        }
    }
});

Answer 2

试试这个，满足你的要求

$(document).on("change", "input", function() {
  if ($("input[value=4]").is(":checked")) {
    $("input[value!=4]").attr("checked", false);

  }

});

$(document).ready(function() {
  for (i = 1; i < 4; i++) {
    $("#container").append("<label class='checkbox-inline'>  <input type='checkbox' id='' value='" + i + "'>information</label>")
  }
  $("#container").append("<label class='checkbox-inline'>  <input type='checkbox' id='' value='4'>any</label>");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="container"></div>

Answer 3

您可以使用此 jquery 代码，其中 input_id 将是您的复选框的 ID。

$(document).on('click', "#input_id :checkbox", function() {
    if ($(this).is(':checked')) {
        $("#input_id :checkbox").prop('checked', false);
        $(this).prop('checked', true);
    }
})

Answer 4

您好，我编辑了我的答案，

有趣的是，我们大多数人都专注于标签的点击，但试图捕捉的是复选框@.@的点击事件。@

我通过修改你的代码来完成这项工作：

<label class="checkbox-inline">
  <input class ="checkbox1" type="checkbox" id="" value = "1" > information
</label>
<label class="checkbox-inline">
  <input class ="checkbox1" type="checkbox" id="" value = "2"> information
</label>
<label class="checkbox-inline">
  <input class ="checkbox1" type="checkbox" id="" value = "3"> information
</label>        
<label class="checkbox-inline">
  <input class ="checkbox1" type="checkbox" id="" value = "4"> any
</label>


$('.checkbox1').click(function(){
      $("input[type='checkbox']").removeAttr('checked');
      $(this).prop('checked', true);
})

我为复选框添加了单独的类并捕获了它的点击事件。 有用！！ :P

编辑： 如果“任意”复选框有特殊逻辑，

$('.checkbox1').click(function(){
    if ($(this).val() != 4 && $("input[value=4]").is(":checked"))
        return false;
    // Check if any was checked
    if ($(this).val() == 4) 
      $("input[value!=4]").removeAttr('checked');
    //$(this).prop('checked', true);
})

两个场景被困。 1.如果选中任何复选框，则取消选中其他复选框 2.如果有其他复选框，则不允许检查其他复选框

P.S 我重用了@Alex 回答中的一些代码：D