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

您可以执行类似向所有组容器

添加类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

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

1 个答案: