Question

当使用两个复选框时，我可以限制一次选择一个复选框。如何使用多个复选框执行此操作？继承人我的javascript：

<script type="text/javascript">

    $(document).ready(function(){
        $('#checkbox1').click(function() {
        var checkedBox = $(this).attr("checked");
            if (checkedBox === true) {
                $("#checkbox2").attr('checked', false);
            } else {
                $("#checkbox2").removeAttr('checked');                    
            }
        });
    });

    $(document).ready(function(){
        $('#checkbox2').click(function() {
        var checkedBox = $(this).attr("checked");
            if (checkedBox === true) {
                $("#checkbox1").attr('checked', false);                     
            } else {
                $("#checkbox1").removeAttr('checked');                       
            }
        });
    });


$(document).ready(function(){
        $('#checkbox3').click(function() {
        var checkedBox = $(this).attr("checked");
            if (checkedBox === true) {
                $("#checkbox3").attr('checked', false);
            } else {
                $("#checkbox3").removeAttr('checked');                    
            }
        });
    });

</script>

我的html代码如下所示

<i><input id="checkbox1" type="checkbox" name="checkbox1" value="gold" />
        <label class="licencecheck" for="checkbox1"></label></i>
<i><input id="checkbox2" type="checkbox" name="checkbox2" value="gold" />
        <label class="licencecheck" for="checkbox2"></label></i>
<i><input id="checkbox3" type="checkbox" name="checkbox3" value="gold" />
        <label class="licencecheck" for="checkbox3"></label></i>

Answer 1

您可以在复选框中添加公共类，以选择它们作为jQuery对象集合，并获取单击并删除其他人的check属性的类。将您的HTML和JavaScript更改为：

$(document).ready(function() {
  $('.my_checkbox').click(function() {
      $(".my_checkbox").not(this).attr('checked', false);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<i><input id="checkbox1" type="checkbox" class="my_checkbox" name="checkbox1" value="gold" />
        <label class="licencecheck" for="checkbox1"></label></i>
<i><input id="checkbox2" type="checkbox" class="my_checkbox" name="checkbox2" value="gold" />
        <label class="licencecheck" for="checkbox2"></label></i>
<i><input id="checkbox3" type="checkbox"  class="my_checkbox" name="checkbox3" value="gold" />
        <label class="licencecheck" for="checkbox3"></label></i>

Answer 2

在这种情况下使用单选按钮，这可以确保您只能选择1个元素，并且可以使用相同name的无限制单选按钮：

＆＃13;

<i>
  <input id="radio1" type="radio" name="group" value="gold" />
  <label class="licencecheck" for="radio1"></label>
</i>
<i>
  <input id="radio2" type="radio" name="group" value="copper" />
  <label class="licencecheck" for="radio2"></label>
</i>
<i>
  <input id="radio3" type="radio" name="group" value="silver" />
  <label class="licencecheck" for="radio3"></label>
</i>

＆＃13;

限制选择两个以上的复选框

2 个答案: