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

您可以执行的操作是，您可以在选中复选框1后立即禁用复选框2-5，然后显示该消息。如果未选中，则可以启用其他复选框并将消息隐藏为：

＆＃13;

$('input[type="checkbox"]').on('change', function(){

  if($('#boxchecked').prop('checked')) {
    $('.check').attr('disabled', true);
    $('#hidden').show();
  }
  else {
    $('.check').removeAttr('disabled');
    $('#hidden').hide();
  }
  
})

＆＃13;

#hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 2

这是我的建议。如何给出只能单独检查一个类的复选框，以及其他类的其他类？希望它有所帮助。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

要取消选中复选框2-5，您可以使用以下内容：

$('input[name="CheckboxGroup1"]').on('click', function() {
  if ($(this).is(":checked")) {
    $('input.check').prop('checked', false);
  }
})

对于最初要隐藏的消息，您可以使用初始化函数将UI状态设置/重置为默认值

function initUI() {
  $('input[name=CheckboxGroup1]').attr('checked', false);
  $('#hidden').hide();
}

Sample Fiddle

此外，对于if...else切换字段可见性的情况，您应该使用.toggle(VisibilityValue)

$("#boxchecked").click(function() {
  $("#hidden").toggle($("#boxchecked").is(':checked'))
});

Updated Fiddle

Answer 4

我认为你想要这种类型的功能 ：

<强>的jQuery

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

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

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

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

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

<div id="hidden">This checkbox number is <label id="get">0</label></div>

HTml代码

CreateThread

我希望它对您有用

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

4 个答案: