HTML复选框处理

HTML checkbox handling

本文关键字：处理 复选框 HTML      更新时间：2023-09-26

所以我有一组复选框，如下所示：

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

当点击任何填充复选框时，我希望"无填充"复选框自动取消选中。此外，如果选择了"无内容"，我希望所有内容都被取消选择。

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

给stuff复选框一些类似的id，比如"chkStuff1"、"chksstuff2"、"chkStuff3"并为每个函数赋予一个onclick函数，比如onclick="StuffClicked（this）；"-所有函数都一样。比方说，无填充复选框有一个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);
  });
});

希望这能帮助

Fiddle:工作演示

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

使用此

<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);
        }
    });
})

单击此处查看

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

$('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示例

如果您为它们提供相同的类，那么当单击其他任何类时，您可以取消选中第一个，序号为0。

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

如何在选中另一个复选框时取消选中一组复选框

使用javascript选中/取消选中复选框？

相关文章：