复选框像单选按钮 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);

这实质上是取消选中除单击的复选框之外的所有复选框。 删除这行代码将使其正常工作。

查看更新的小提琴

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 将导致表单字段“性别”包含值“女性”或“男性”，具体取决于用户的选择。 这是完整更正的示例：

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