复选框，如单选按钮jquery

Question

我有一堆checkbox在不同的容器，如下所示：

$("input:checkbox").click(function() {
  var url = "http://example.com/results?&"
  var flag = false;
  var $box = $(this);
  var $facet = $box.val();
  var $name = $box.attr("name");
  var group = "input:checkbox['" + $facet + $name + "']:checked";
  console.log(group);
  $("#pruebita").not(this).attr("checked", false);
  $(group).each(function() {
    if (!flag) {
      url = url + $(this).val() + $(this).attr('name');
      flag = true; // To trace if first query string added
    } else {
      url = url + "&" + $(this).val() + $(this).attr('name');
    }
  });
  console.log(url);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
  <li class="fTitle" id="genderTitle">
    <a class="filter facetTitle " id="gender">
gender
</a>
  </li>
  <div class="fct-bd colorWrap">
    <ul class="noShow-filter Wrap">
      <li class="cnv-level-1 mbs">
        <label class="facetbutton">
          <input id="pruebita" type="checkbox" name="women" value="gender=" data-facet="Gender">
          <span class="fct-scroll-item">women</span>
        </label>
      </li>
      <li class="cnv-level-1 mbs">
        <label class="facetbutton">
          <input id="pruebita" type="checkbox" name="men" value="gender=" data-facet="Gender">
          <span class="fct-scroll-item">men</span>
        </label>
      </li>

    </ul>
  </div>
</ul>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
  <li class="fTitle" id="occasionTitle">
    <a class="filter facetTitle " id="occasion">
ocassion
</a>
  </li>
  <div class="fct-bd colorWrap">
    <ul class="noShow-filter Wrap">
      <li class="cnv-level-1 mbs">
        <label class="facetbutton">
          <input id="pruebita" type="checkbox" name="beach" value="occasion=" data-facet="Occasion">
          <span class="fct-scroll-item">beach</span>
        </label>
      </li>
      <li class="cnv-level-1 mbs">
        <label class="facetbutton">
          <input id="pruebita" type="checkbox" name="street" value="occasion=" data-facet="Occasion">
          <span class="fct-scroll-item">street</span>
        </label>
      </li>
    </ul>
  </div>
</ul>

我希望在选中复选框的另一部分时，复选框不会取消选中上一个选项。

完整的代码也在jsfiddle

Answer 1

在您的代码中

$("#pruebita").not(this).attr("checked",false);

除了点击的复选框之外，其实基本上取消选中所有复选框。删除这行代码将使其正常工作。

查看更新的fiddle

Answer 2

你根本不需要任何javascript来解决这个问题;您只需要使用适当的表单元素并正确设置其属性。

单选按钮适用于只能选择一组选项中的一个选项的情况;复选框适用于多个应该可选的复选框。它们不可互换。不要使用javascript将单选按钮功能伪装成复选框元素;这是糟糕的可用性，因为它给用户提供了关于表单如何工作的错误期望。

部分问题在于您混淆了“名称”和“值”属性的目的。 “name”属性用于定义单选按钮属于哪个组;所有具有相同名称的单选按钮将位于同一组中。 “value”属性包含将在选择该选项时作为表单的一部分提交的值。你让他们倒退了：

<input type="checkbox" name="women" value="gender=" ...>
<input type="checkbox" name="men" value="gender=" ...>

使用上面的代码，所有框都有一个唯一的“名称”，因此它们都不会被分组;同时用户的选择不会产生任何影响，因为它们都具有相同的值。相反，这应该是这样的：

<input type="radio" name="gender" value="women" ...>
<input type="radio" name="gender" value="men" ...>

该HTML将使表单字段“gender”包含值“women”或“men”，具体取决于用户的选择。以下是完整更正的示例：

<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
  <li class="fTitle" id="genderTitle">
    <a class="filter facetTitle" id="gender">gender</a>
  </li>
  <div class="fct-bd colorWrap">
    <ul class="noShow-filter Wrap">
      <li class="cnv-level-1 mbs">
        <label class="facetbutton">
          <input id="pruebita" type="radio" name="gender" value="women" data-facet="Gender">
          <span class="fct-scroll-item">women</span>
        </label>
      </li>
      <li class="cnv-level-1 mbs">
        <label class="facetbutton">
          <input id="pruebita" type="radio" name="gender" value="men" data-facet="Gender">
          <span class="fct-scroll-item">men</span>
        </label>
      </li>

    </ul>
  </div>
</ul>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
  <li class="fTitle" id="occasionTitle">
    <a class="filter facetTitle " id="occasion">ocassion</a>
  </li>
  <div class="fct-bd colorWrap">
    <ul class="noShow-filter Wrap">
      <li class="cnv-level-1 mbs">
        <label class="facetbutton">
          <input id="pruebita" type="radio" name="occasion" value="beach" data-facet="Occasion">
          <span class="fct-scroll-item">beach</span>
        </label>
      </li>
      <li class="cnv-level-1 mbs">
        <label class="facetbutton">
          <input id="pruebita" type="radio" name="occasion" value="street" data-facet="Occasion">
          <span class="fct-scroll-item">street</span>
        </label>
      </li>
    </ul>
  </div>
</ul>