javascript - 如果选择一个复选框取消选择所有其他

Question

好的，所以我有一个复选框列表 1、2、3、4 和 5。我希望函数选择 2、3、4 和 5，但如果选择 1，则取消选择 2、3、 4 和 5，一旦 2 到 5 未被选中，就会在 div 中显示一条消息。

到目前为止，我可以选择 1 和其他之一...并且在选择 1 时出现消息

问题 1 选择 1 后，我无法取消选择 2 到 5

问题 2 即使未选中该框，该消息也会在页面加载时显示。

HTML

 <input type="checkbox" class="" value="checkbox" name="CheckboxGroup1" id="boxchecked"  />
one <br/>

<input type="checkbox" class="check" />
two <br/>

<input type="checkbox" class="check" />
three <br/>

<input type="checkbox" class="check" />
four <br/>

<input type="checkbox" class="check" />
five

<div id="hidden">Two to five can not be selected whilst you have one selected</div>

JavaScript

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

$(document).ready(function(){
  $("#boxchecked").click(function ()
  {
      if ($("#boxchecked").is(':checked'))
      {
          $("#hidden").show();
      }
      else
      {
          $("#hidden").hide();
      }              
  });
});

$('input[name=CheckboxGroup1]').attr('checked', false);

Answer 1

这是我的建议。给只能单选的checkbox一个class，其他的checkbox另一个class怎么样？
希望对您有所帮助。

$('input[type="checkbox"]').on('click', function() {
    if($(this).hasClass('singlecheck')) {
       if($('input.multicheck').is(":checked")) {
         $('#warning').show();  
       }
       $('input.multicheck').prop('checked', false);
    } else {
      $('input.singlecheck').prop('checked', false);
      $('#warning').hide();
    }
     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="singlecheck" value="one" name="CheckboxGroup1" id="boxchecked"  />
one <br/>

<input type="checkbox" class="multicheck" value="two"/>
two <br/>

<input type="checkbox" class="multicheck" value="three"/>
three <br/>

<input type="checkbox" class="multicheck" value="four"/>
four <br/>

<input type="checkbox" class="multicheck" value="five"/>
five

<div id="warning" style="display:none">Two to five can not be selected whilst you have one selected</div>