多个复选框组 - 如果有空的则发出警报

Question

我有一组带有 jquery 脚本的复选框，如果所有复选框都未选中，它将更改容器的背景颜色 div。这工作正常，但页面上有几个不同名称的复选框组，目前我为每个复选框组都有一个单独的脚本。

我一直在尝试编写一个脚本来涵盖所有这些，但只触发相关的脚本。我发现的主要困难是将 document.querySelectorAll('.xscheck') 替换为仅检查已单击的同一组中的复选框的内容。

如果有人能给我指点，我将永远感激不尽，或者至少很高兴！

提前致谢

史蒂夫

HTML

<div class="xs">
  <div class="">
    <input id="xscheck1" type="checkbox" name="xsLevel[]" class="xscheck" value="1" checked="">
    <label for="xscheck1">50</label>
  </div>
  <div class="">
    <input id="xscheck2" type="checkbox" name="xsLevel[]" class="xscheck" value="2" checked="">
    <label for="xscheck2">100</label>
  </div>
  <div class="">
    <input id="xscheck3" type="checkbox" name="xsLevel[]" class="xscheck" value="3" checked="">
    <label for="xscheck3">150</label>
  </div>
  <div class="">
    <input id="xscheck4" type="checkbox" name="xsLevel[]" class="xscheck" value="4" checked="">
    <label for="xscheck4">200</label> 
  </div>
</div>

JS

$('.xscheck').click(function(){
var textinputs = document.querySelectorAll('.xscheck'); 
var empty = [].filter.call( textinputs, function( el ) {
return !el.checked
});

if (textinputs.length == empty.length) {
    $('div.xs').addClass('bg-danger');
    $('.xs .noneselectederror').css("display", "block");
}else {
    $('div.xs').removeClass('bg-danger');
    $('.xs .noneselectederror').css("display", "none");
}
});

Answer 1

您可以向所有组容器添加 class ckgrp

<div class="xs ckgrp">

然后

$('.ckgrp input:checkbox').click(function(){
    var $grp = $(this).closest('.ckgrp');
    var checked = $grp.find('input:checkbox').is(':checked');
    $grp.toggleClass('bg-danger', !checked);
    $grp.find('.noneselectederror').toggle(!checked);
});

演示：Fiddle

多个复选框组 - 如果有空的则发出警报

Multiple checkbox groups - alert if any are empty

forms

checkbox

jquery