HTML 复选框处理答案

【问题标题】：HTML checkbox handlingHTML 复选框处理
【发布时间】：2014-12-11 00:29:18
【问题描述】：

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

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

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

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

【问题讨论】：

你在使用 jQuery 吗？
我有能力，只是不知道从哪个方向开始
您确定您正在解决正确的问题吗？复选框应该是开/关选项，如果一组复选框都没有被选中，那么，没有一个被选中——没有理由有一个“没有东西”的选择。如果您希望控制取消选中一组中的所有复选框，从逻辑上讲，它是一个按钮，而不是一个复选框。

标签： javascript html

【解决方案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);
  });
});

希望对你有帮助

【讨论】：

【解决方案2】：

小提琴：WORKING DEMO

    <label><input type="checkbox" class="jsNoStuff" /> No Stuff</label><br />
    <label><input type="checkbox" class="jsStuff" /> Stuff 1</label><br />
    <label><input type="checkbox" class="jsStuff" /> Stuff 2</label><br />
    <label><input type="checkbox" class="jsStuff" /> Stuff 3</label><br />
    <label><input type="checkbox" class="jsStuff" /> Stuff 4</label><br />

    <script type="text/javascript">
        jQuery(function ($) {
            var $jsNoStuff = $('.jsNoStuff');
            var $jsStuff = $('.jsStuff');
            var fClickStuff = function () {
                $jsNoStuff.prop('checked', false);
            };
            var fClickNoStuff = function () {
                if ($jsNoStuff.is(':checked')) {
                    $jsStuff.prop('checked', false);
                }
            };
            $jsNoStuff.click(fClickNoStuff);
            $jsStuff.click(fClickStuff);
        });
    </script>

【讨论】：

【解决方案3】：

使用这个

<input type="checkbox" id="all" />
<input type="checkbox" class="a" />
<input type="checkbox" class="a" />
<input type="checkbox" class="a" />

jquery

jQuery('#all').click(function(){
 var that =$(this);
    jQuery('.a').each(function(v){
        if (that.is(':checked')){
   $(this).attr('disabled', true);
        }else{
           $(this).attr('disabled', false);
        }
    });
})

click here for see

【讨论】：

【解决方案4】：

这应该可以满足您的需要：

$('input[name="noStuff"]').change(function () {
    if ($(this).is(":checked")) $('input[name^="stuff"]').prop('checked', false)
})
$('input[name^="stuff"]').change(function () {
    $('input[name="noStuff"]').prop('checked', !$('input[name^="stuff"]:checked').length)
});

jsFiddle example

【讨论】：

【解决方案5】：

如果你给他们所有相同的类，你可以在点击其他任何一个时取消选中序号为 0 的第一个。

您还可以通过循环遍历集合并设置属性来取消选中/选中选项。这是选中或取消选中多个选项的简单方法。

How to uncheck a group of checkboxes when another checkbox is checked

Check/Uncheck checkbox with javascript?

【讨论】：

我认为你的意思是相同的class，而不是id