Question

我正在尝试构建一个类别过滤器。它工作，但我试图添加另一个表单字段用于多种选择的单选按钮。但是，只能选择1个按钮。如果我从按钮工作的第一个表单字段中单击一个单选按钮，但是如果我单击另一个表单上的单选按钮，则会选择该表单，我需要能够同时选择这两个。复选框输入类型有效。

在这里小提琴：Fiddle

HTML：

<style>.body .item .textnoimgleftlarge {width: auto;margin: 0;padding: 0;}</style>
<div class="filterGenius">
<form name="PC">
<table>
<tr>
<td colspan="3"><h3>Desktop filter</h3><br></td>
<td></td>
<td colspan="2"><a class="filterGeniusButton" onclick="removeFSS()">Clear all filters</a></td>
<td></td>
</tr>
<tr>
<td width="60px"><b>CPU</b></td>
<td><label><input type="radio" name="processor" value="C2D"/><span>C2D</span></label></td>
<td><label><input type="radio" name="processor" value="DC-"/><span>Dualcore</span></label></td>
<td><label><input type="radio" name="processor" value="i3-"/><span>i3</span></label></td>
<td><label><input type="radio" name="processor" value="i5-"/><span>i5</span></label></td>
<td><label><input type="radio" name="processor" value="i7-"/><span>i7</span></label></td>
</tr>


<tr>
<td width="60px"><b>Specifications</b></td>
<td><label><input type="checkbox" name="processor" value="SSD"/><span>SSD</input></span></label>            </td>
<td><label><input type="checkbox" name="processor" value="WLAN"/><span>WLAN</input></span> </label></td>
<td><label><input type="checkbox" name="processor" value="W7P"/><span>W7P</input></span></td>
<td><label><input type="checkbox" name="processor" value="W8P"/><span>W8P</input></span></td>
</tr>
<tr>
<td></td>
<td><label><input type="checkbox" name="processor" value="SFF"/><span>SFF</input></span></label>   </td>
<td><label><input type="checkbox" name="processor" value="AIO"/><span>All in one</input></span>   </label></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</div>

javascript：

<script>
function removeFSS(){ga("send","event","button","click","filter-clear");var e=$.query.get("fss");encodeURIComponent(e).replace(/%20/g,"+");$(".filterGenius input").each(function(){var t=this;t="\\ "+$(t).val();var n=new RegExp(t,"g");e=e.replace(n,"")});var t=encodeURI(unescape($.query.set("fss",e)));var n=window.location.href.split("?")[0];window.location.href=n+t}$(document).ready(function(){$(".filterGenius input").each(function(){if(window.location.href.indexOf($(this).val())>=0){$(this).attr("checked","checked")}});$(".filterGenius input").change(function(){if($(this).is(":checked")){ga("send","event","button","click","filter-on");var e=$.query.get("fss");if(e==true){e=""}encodeURIComponent(e).replace(/%20/g,"+");var t=$(this).val();var n="%2B"+t;var r=new RegExp(n,"g");e.replace(r,"");var i=e;if($(this).is(":radio")){$(".filterGenius input[type=radio]").each(function(){var e=this;e="\\ "+$(e).val();var t=new RegExp(e,"g");i=i.replace(t,"")})}var i=i+"+"+t;var s=encodeURI(unescape($.query.set("fss",i)));$(".filterGenius input").attr("disabled",true);var o=window.location.href.split("?")[0];window.location.href=o+s}else if(!$(this).is(":checked")){ga("send","event","button","click","filter-off");var e=$.query.get("fss").toString();if(e===undefined){}else if(e=="true"){e=""}else{encodeURIComponent(e).replace(/%20/g,"+");var t=$(this).val();var n="\\ "+t;var r=new RegExp(n,"g");e=e.replace(r,"");if($(this).is(":radio")){$(".filterGenius input[type=radio]").each(function(){var t=$(this).val();var n="\\ "+t;console.log(e);console.log(n);var r=new RegExp(n,"g");e.replace(r,"");console.log("FSS RADIO: "+e)})}var i=e;var s=encodeURI(unescape($.query.set("fss",i)));$(".filterGenius input").attr("disabled",true);var o=window.location.href.split("?")[0];window.location.href=o+s}}})})
</script>

Answer 1

Javascript不是问题。您描述的是单选按钮和复选框的预期行为。单选按钮一次只能选择一个项目。这是一篇关于哪个控件是appropriate的好文章。要使单选按钮独立，您必须使用不同的名称属性。

Html过滤器表单。 Javascript不允许多个字段

1 个答案: