Question

所以我有一组复选框，我只能在每组中选中一个框，如何更改，以便每组检查多个框？

Codepen：http://codepen.io/anon/pen/dNwqzx

$(document).ready(function() {
  $(".filterGenius input").each(function() {
    if (window.location.href.indexOf($(this).val()) >= 0) {
      $(this).attr("checked", "checked")
    }
  });
  $(".filterGenius select option").each(function() {
    if (window.location.href.indexOf($(this).val()) >= 0) {
      $(this).attr('selected', true);
    }
  });

  $(".filterGenius input").change(function() {

    var s = encodeURI(unescape(jQuery.query.set("fss", getFSS())));
    var o = window.location.href.split("?")[0];

    $(".filterGenius input").attr("disabled", true);

    window.location.href = o + s
  });
});

$('input[type="checkbox"]').on('change', function() {
  $('input[name="' + this.name + '"]').not(this).prop('checked', false);
});

<div class="filterGenius">
  <div class="col">
    <b>Manufacturer</b>
    <br>
    <input type="checkbox" name="Manufacturer" value="HP" /> <span class "filtertext">HP</span>
    <br>
    <input type="checkbox" name="Manufacturer" value="Dell" /> <span class "filtertext">Dell</span>
    <br>
    <input type="checkbox" name="Manufacturer" value="Lenovo" /> <span class "filtertext">Lenovo</span>
    <br>
    <input type="checkbox" name="Manufacturer" value="Apple" /> <span class "filtertext"> Apple</span>
    <br>
    <input type="checkbox" name="Manufacturer" value="Acer" /> <span class "filtertext">Acer</span>
    <br>
    <input type="checkbox" name="Manufacturer" value="Asus" /> <span class "filtertext"> Asus</span>
    <br>
  </div>
  <div class="col">
    <b>OS</b>
    <br>
    <input type="checkbox" name="OS" value="W7H" /> <span class "filtertext">W7H</span>
    <br>
    <input type="checkbox" name="OS" value="Bing" /> <span class "filtertext">Bing</span>
    <br>
    <input type="checkbox" name="OS" value="W7P" /> <span class "filtertext">W7P</span>
    <br>
    <input type="checkbox" name="OS" value="W8P" /> <span class "filtertext">W8P</span>
    <br>
    <input type="checkbox" name="OS" value="W8.1P" /> <span class "filtertext">W8.1P</span>
    <br>
    <input type="checkbox" name="OS" value="Freedos" /> <span class "filtertext">Freedos</span>
    <br>
    <input type="checkbox" name="OS" value="CMAR" /><span class "filtertext"> CMAR</span>
    <br>
    <input type="checkbox" name="OS" value="COA" /><span class "filtertext"> COA</span>
    <br>
  </div>
</div>

Answer 1

只是评论或删除这一行：

$('input[type="checkbox"]').on('change', function() {
    $('input[name="' + this.name + '"]').not(this).prop('checked', false);
});

Answer 2

最后一个jquery函数阻止您检查多个框。据我所知，这就是它的全部。删除它，你应该能够检查任意多个盒子！

$(document).ready(function () {
 $(".filterGenius input").each(function () {
 if (window.location.href.indexOf($(this).val()) >= 0) {
 $(this).attr("checked", "checked")
}
});

$(".filterGenius select option").each(function () {
if (window.location.href.indexOf($(this).val()) >= 0) {
$(this).attr('selected', true);
}
});

$(".filterGenius input").change(function () { 
var s = encodeURI(unescape(jQuery.query.set("fss", getFSS())));
var o = window.location.href.split("?")[0];

$(".filterGenius input").attr("disabled", true);
window.location.href = o + s
});
});

//$('input[type="checkbox"]').on('change', function() {
//$('input[name="' + this.name + '"]').not(this).prop('checked', //false);
//});

<div class="filterGenius">
 <div class="col">
     <b>Manufacturer</b><br>
        <input type="checkbox" name="Manufacturer_1" value="HP"  /> <span class"filtertext">HP</span><br>
        <input type="checkbox" name="Manufacturer_2" value="Dell" />  <span class"filtertext">Dell</span><br>
        <input type="checkbox" name="Manufacturer_3" value="Lenovo" />  <span class"filtertext">Lenovo</span><br>
        <input type="checkbox" name="Manufacturer_4" value="Apple" /> <span class"filtertext"> Apple</span><br>
        <input type="checkbox" name="Manufacturer_5" value="Acer" />  <span class"filtertext">Acer</span><br>
        <input type="checkbox" name="Manufacturer_6" value="Asus" /> <span class"filtertext"> Asus</span><br>
  </div>
  <div class="col">
     <b>OS</b><br>
       <input type="checkbox" name="OS_1" value="W7H"  /> <span class"filtertext">W7H</span><br>
       <input type="checkbox" name="OS_2" value="Bing"  /> <span class"filtertext">Bing</span><br>
       <input type="checkbox" name="OS_3" value="W7P"  /> <span class"filtertext">W7P</span><br>
       <input type="checkbox" name="OS_4" value="W8P"  /> <span class"filtertext">W8P</span><br>
       <input type="checkbox" name="OS_5" value="W8.1P"  /> <span class"filtertext">W8.1P</span><br>
       <input type="checkbox" name="OS_6" value="Freedos"  /> <span class"filtertext">Freedos</span><br>
       <input type="checkbox" name="OS_7" value="CMAR"  /><span class"filtertext"> CMAR</span><br>
       <input type="checkbox" name="OS_8" value="COA"  /><span class"filtertext"> COA</span><br>
   </div>
 </div>

这应该（希望）实现你要做的事情 - 正如@Yunus Saha指出的那样

Answer 3

我认为您可能需要每个选中复选框的值以便更好

将name属性更改为每个复选框的唯一属性，或将其用作数组。

制造商示例复选框： <input type="checkbox" name="Manufacturer[]" value="HP" />

也为其他复选框执行相同操作。

Answer 4

从javascript代码（最后三行）中删除此行

$('input[type="checkbox"]').on('change', function() {
    $('input[name="' + this.name + '"]').not(this).prop('checked', false);
});

选择同一组中的多个复选框

4 个答案: