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

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 对象集合进行选择，并获取单击的复选框并删除其他复选框的复选框。将您的 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>