Div单选按钮

Question

我在这里和网上看到了一些答案，但是当我需要问别的时候我已经提出了这个问题。 +我似乎无法得到任何工作。

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

E.G：

是= <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被选中，没有单选按钮。为编写问题时不添加内容而道歉。

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

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

Answer 3

可能会有所帮助： -

http://jsfiddle.net/cNqV7/

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

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

</div>