【问题标题】：Div radio buttonsDiv 单选按钮
【发布时间】：2013-12-16 18:58:17
【问题描述】：

我在这里和网上看到了一些答案，但由于我需要问其他问题，所以我提出了这个问题。 + 我似乎什么都做不了。

所以我所追求的是Yes 和No 选项，这些将是按钮，当按下它们时它们将保持活动状态，因为它们会使div 出现在页面上，具体取决于那里的值。

例如：

是 = <div id="won">You won</div>

否 = <div id="lose">You lost</div>

这些 div 将出现在按钮下方。我的问题是如何从 div 中获取值？我试图在里面使用单选按钮来完成这项工作，但我似乎做不到。

到目前为止我所拥有的。

HTML：

<div class="buttonHolder">
    <div class="option">Yes
        <input id="yes" type="radio" />
    </div>
    <div class="option">No
        <input id="no" type="radio" />
    </div>
</div>

CSS：

div {
    outline: 1px solid;
}
.buttonHolder {
    width: 400px;
    height: 150px;
}
.buttonHolder1 {
    background: red;
}
.option {
    width: 50%;
    height: 100%;
    float: left;
    background: #eee;
    cursor:pointer;
}
.optiontest {
    background: #fff;
}

jQuery:

$('.option').click(function () {
    var $this = $(this);
    var input = $this.find('input');
    $('.optiontest').toggleClass('optiontest');
    $(input).prop('checked', true);
    $(this).toggleClass('optiontest');

});

DEMO HERE

所以按钮看起来像这样，并且在按下时会改变背景以及提出另一个问题等......在同一页面上会有多个问题和答案。

编辑：

忘了补充说我希望单选按钮不可见，所以看起来div 被选中并且没有单选按钮。很抱歉在写问题时没有添加。

【问题讨论】：

data 属性会帮助你，即data-yes 和data-no

标签： jquery html css

【解决方案1】：

您可以在 DIV 中包含数据属性

看看你的 jsfiddle，我在 HTMl 和 Jquery 中做了一些修改： http://jsfiddle.net/bNNA6/1/

 $('.option').click(function () {
        var $this = $(this);
        var input = $this.find('input');
        $('.optiontest').toggleClass('optiontest');
        $(input).prop('checked', true);
        $(this).toggleClass('optiontest');
        var dataValue = $this.data("optionvalue"); // using data attribute to put the value
        alert(dataValue);
    });

【讨论】：

好吧，这是有道理的，我忘了在我的问题中说我真的不希望单选按钮可见。很抱歉，现在更新我的问题。
使用这个，就不需要单选按钮了，不是吗？使用此data 属性时。
是的...如果您愿意，您可以完全删除单选按钮...更新了您的 jsfiddle..jsfiddle.net/bNNA6/5

【解决方案2】：

something like this 呢？

jQuery 非常简单：

$('input[name="options"]').click(function () {
    $('.optiontest').removeClass('optiontest')
    $(this).closest('.option').toggleClass('optiontest')
});

并且我修改了您的 HTML 以提供单选按钮值（您已将其设置为 ID）和相同的名称，这为它们提供了正确的单选按钮行为。

<div class="buttonHolder">
    <div class="option">Yes
        <input name="options" value="yes" type="radio" />
    </div>
    <div class="option">No
        <input name="options" value="no" type="radio" />
    </div>
</div>

【讨论】：

感谢您的回答，我编辑了我的问题，因为我忘记了一个关键点。但这几乎是我想要的，但没有可见的单选按钮。

【解决方案3】：

这可能会有所帮助：-

http://jsfiddle.net/cNqV7/

<div class="buttonHolder">
<div class="option1">Yes

</div>
<div class="option2">No

</div>

【讨论】：