jQuery没有发送正确的GET数据

Question

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

例如，在下面的图像中，输入类型设置为隐藏，如果您查看网址，则会发送不需要的参数

这就是我想要的。 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>

jQuery的：

$( document ).ready(function() {
$("#browse-settings span").click(function() {
    $name = $(this).attr('name');
    $value = $(this).attr('value');

    $('span[name='+$name+']').removeClass('span-background');
    $(this).addClass('span-background');

    $('input[name='+$name+']').removeAttr('checked');
    $('input[name="'+$name+'"][value="'+$value+'"]').attr('checked',true);
});
});

我做错了什么？

Answer 1

我希望您意识到，通过添加点击事件来跨越元素，您无法（或谁选择不使用）鼠标或其他指针设备的用户无法访问您的页面。如果您认为必须实现自己的伪无线电，我认为最好使用锚元素，因为用户可以选择它们并从键盘上“点击”它们。

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

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

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>

使用相应的JS：

$(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') );
    });
});

演示：http://jsfiddle.net/Tm89q/

请注意，关于命名变量的非正式约定是您使用$前缀作为jQuery对象的变量，如上面的$this，但不将前缀用于其他变量，而不是name。