javascript - HTML 复选框处理

Question

所以我有一组像这样的复选框:

[x] No stuff
[ ] Stuff 1
[ ] Stuff 2
[ ] Stuff 3

当单击任何内容复选框时，我希望自动取消选择“无内容”复选框。另外，如果选择“无内容”，我希望取消选择所有内容。

有人能指出我正确的方向吗？谢谢。

Answer 1

为内容复选框提供一些类似的 ID - 例如“chkStuff1”、“chkStuff2”、“chkStuff3”并为每个类似的对象提供一个 onclick 函数 - onclick = "StuffClicked(this);"- 对所有人都一样。假设“No Stuff”复选框有一个 id -“chkNoStuff”

然后尝试这个代码 -

function StuffClicked(chkBoxObj) {

  var isNoStuffChecked = true;

  if($('#chkBoxObj').is(':checked')) {
     $('#chkNoStuff').prop('checked', false);
  }

  else {
     $('[id^="chkStuff"]').each(function(){
       if($(this).is(':checked')) {
         isNoStuffChecked = false;
         break;
       }
     });
  }

  $('#chkNoStuff').prop('checked', isNoStuffChecked );
}


$('#chkNoStuff').unbind('click').bind('click', function(){
  $('[id^="chkStuff"]').each(function(){
    $(this).prop('checked', false);
  });
});

希望这有帮助