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

【问题标题】：Disappearing radio button and clickable labels消失的单选按钮和可点击的标签
【发布时间】：2012-06-15 18:00:20
【问题描述】：

我想让单选按钮消失，而不是按钮，单选按钮的标签本身是可点击的，我将更改所选单选的背景颜色。我怎样才能做到这一点？例如，我有“是”和“否”标签，这些标签是可点击的，根本没有单选按钮。这些只是改变背景颜色，但显示不想要的单选按钮。

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>

谢谢

【问题讨论】：

那么为什么需要radio 按钮？将其设为 2 <div>-s 并将所选值放入隐藏字段

标签： javascript jquery html

【解决方案1】：

这个其实很简单。如果您只使用“标签”标签，它将是可点击的。然后您可以简单地隐藏单选按钮。

<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/

【讨论】：

我输入了完全相同的代码，当您的答案出现时，我准备点击发布。
对不起！当这种情况发生时，我讨厌它。

【解决方案2】：

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

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

这里有一个jsfiddle 来演示。

简而言之，当一个标签被点击时，从所有相关标签中移除控制背景颜色的'selected'类，并将它应用到被点击的那个。

【讨论】：