消失的单选按钮和可点击标签

Question

我希望将单选按钮隐藏，而是使单选按钮的标签本身可点击，并更改所选单选按钮的背景颜色。我该如何做到这一点？例如，我有“是”和“否”标签，这些标签将可点击而且根本没有单选按钮。这些只会改变背景颜色而不显示单选按钮，这是不想要的。

JavaScript

$(document).ready(function(){
    var ok = "green";
    var notok = "red";

    $.each($(":radio"), function(){

        if($(this).prop("checked") == false)
        {
            $(this).parent().css("background", notok);
        }
        else
        {
            $(this).parent().css("background", ok );
        }
    })

    $(":radio").click(function(){
        $("[name='"+$(this).prop("name")+"']").parent().css("background", notok);
        $(this).parent().css("background", ok );

    })
})

HTML

<FORM name="form1">
 <div>
        <input type="radio" id="yes" name="q"checked="checked"/> Yes
        </div>
        <div>
        <input type="radio" id="no" name="q"/>No
        </div>


</FORM>

谢谢

- user893970

---

那么为什么需要“单选”按钮呢？将其制作成2个<div>，并将所选值放入隐藏字段中。 - Zoltan Toth

Answer 1

这个其实很简单。如果你只使用一个“label”标签，它就可以被点击。然后你可以简单地隐藏单选按钮。

<input id="yes" type="radio" name="q" value="radiobutton" style="display:none;" />
<label for="yes">Yes </label>

<input id="no" type="radio" name="q" value="radiobutton" style="display:none;" />
<label for="no">No</label>

顺便提一下，这里有一个能够正常工作的JSFiddle链接：http://jsfiddle.net/scGE9/2/

- Jonathan Rowny

---

我已经打出了完全相同的代码，准备好点击发布，就在你的答案出现之前。 - gcochard

抱歉！我讨厌发生这种事情。 - Jonathan Rowny

Answer 2

如果我理解你的问题，我会隐藏单选按钮，然后将点击处理程序附加到标签上，以更改背景颜色：

$('label').click(function () {
   $('label').removeClass('selected');
   $(this).addClass('selected');
}); 

这里有一个 jsfiddle来演示。

简而言之，当单击标签时，从所有相关标签中删除控制背景颜色的“selected”类，并将其应用于被单击的标签。

- kinakuta