jquery - 分区单选按钮

Question

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

所以我要找的是Yes和 No选项，这些将是按钮，当按下它们时它们将保持事件状态，因为它们将生成 div。根据那里的值(value)出现在页面上。

例如:

是 = <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中包含data属性

看看你的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);
    });