jQuery未发送正确的GET数据

我试图通过让用户单击文本而不是单选按钮来创建单选按钮的替代方案。我有工作，但我的问题是，通过GET方法传递的数据是不正确的。当我将输入类型设置为radio时，数据将正确传递（第二幅图像），但当我将输入类型设置为hidden时，GET参数将全部发送（第一幅图像）。

例如，在下面的图像中，输入类型设置为隐藏，如果查看url，它将发送不需要的参数

这就是我想要的。url只包含我需要的参数，但输入类型设置为radio，我希望它们隐藏

HTML:
class=“span background”仅设置颜色背景

<div id="browse-settings">
Browse For: 
<span name="GN" value=0 class="span-background" >Female</span>
<span name="GN" value=1>Male</span>
<br>

Orientation: 
<span name="OR" value=0 class="span-background">Straight</span>
<span name="OR" value=1>Gay</span>
<span name="OR" value=2>Bi</span>
<span name="OR" value=3>All</span>
<form action="" method="GET">
<input type="hidden" name="GN" value=0 checked>
<input type="hidden" name="GN" value=1>

<input type="hidden" name="OR" value=0 checked>
<input type="hidden" name="OR" value=1>
<input type="hidden" name="OR" value=2>
<input type="hidden" name="OR" value=3>

<input  name="search" type="submit" value="Search" />
</form>

</div>

---

我做错了什么？

我希望您意识到，通过添加跨元素的点击事件，无法（或选择不使用）使用鼠标或其他定点设备的用户将无法访问您的页面。如果您觉得必须实现自己的伪无线电，那么我认为最好使用锚元素，因为这样用户就可以通过选项卡对它们进行定位，并从键盘上“单击”它们

无论如何，问题是标准单选按钮只有在被选中时才会被提交，这意味着请求将只包含一个带有单选按钮组名称的参数。但是隐藏的元素都被提交了

解决方案是为每组“收音机”使用一个隐藏元素，并根据需要设置一个元素的值：

Browse For: 
<span name="GN" value=0 class="span-background" >Female</span>
<span name="GN" value=1>Male</span>
<br>

Orientation: 
<span name="OR" value=0 class="span-background">Straight</span>
<span name="OR" value=1>Gay</span>
<span name="OR" value=2>Bi</span>
<span name="OR" value=3>All</span>
<form action="" method="GET">
<input type="hidden" name="GN" value=0>    
<input type="hidden" name="OR" value=0>    
<input  name="search" type="submit" value="Search" />
</form>

演示：

---

请注意，命名变量的非正式约定是，您对将成为jQuery对象的变量使用

$

前缀，如上面的my

$this

，但不对其他变量使用前缀，因此不要在

name

上使用前缀，我不确定这是否是有效的HTML。。。所有的值都应该用引号括起来。使用css3，你可以使用不带javascript的复选框，比如@AbrahamUribe谢谢我会调查的，你能给我举个例子吗？谢谢，我会试试这个

Browse For: 
<span name="GN" value=0 class="span-background" >Female</span>
<span name="GN" value=1>Male</span>
<br>

Orientation: 
<span name="OR" value=0 class="span-background">Straight</span>
<span name="OR" value=1>Gay</span>
<span name="OR" value=2>Bi</span>
<span name="OR" value=3>All</span>
<form action="" method="GET">
<input type="hidden" name="GN" value=0>    
<input type="hidden" name="OR" value=0>    
<input  name="search" type="submit" value="Search" />
</form>

$(document).ready(function() {
    $("#browse-settings span").click(function() {
        var $this = $(this),
            name = $this.attr('name');        
        $('span[name='+name+']').removeClass('span-background');
        $this.addClass('span-background');        
        $('input[name='+name+']').val( $this.attr('value') );
    });
});