0

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

例如，在下图中，输入类型设置为隐藏，如果您查看 url，它正在发送不需要的参数 在此处输入图像描述

这就是我要的。url 仅包含我需要的参数，但输入类型设置为单选，我希望它们隐藏 在此处输入图像描述

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);
});
});

我究竟做错了什么？

4

1 回答 1

0

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

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

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

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上面的 my ，但不要对其他变量使用前缀，所以不要使用 on name。

于 2013-11-05T22:32:42.687 回答