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>

使用这些复选框，用户可以进行选择。但是，如果用户选择＆＃34;任何＆＃34; 复选框，则需要取消选择所有其他选择。

我尝试过类似的东西，但它并不适合我。

$('.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

试试这个，它符合您的要求

＆＃13;

$(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>");
})

＆＃13;

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

＆＃13;

Answer 3

您好我编辑了我的答案，

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

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

<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);
})

我为复选框添加了单独的类并捕获其click事件。有用！！：P

编辑：如果＆＃34;任何＆＃34;复选框有一个特殊的逻辑，

$('.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

的答案中的一些代码

Answer 4

你可以使用这个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);
    }
})

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

4 个答案: