javascript - 可点击的按钮而不是单选按钮

Question

我想要可点击的按钮而不是单选按钮。我在 jsfiddle 上看到了一个例子，但唯一的问题是我的代码中没有标签。我无权访问代码，因此我也无法添加它们。我只能将 javascript 和 css 添加到我的 CMS。有什么方法可以达到效果吗？

<div class="button1">
    <input type="radio" checked="" value="1" name="question">question 1
</div>
<div class="button2">
    <input type="radio" value="2" name="question">question 2
</div>

我得到了解决方案 here但它在 IE 中不起作用。

$(function() {
    $('.container input[type="radio"]').each(function(index) {
        console.log($(this));
        $(this).attr('id', 'radio' + index);
        var label = $('<label />', {'for': 'radio' + index}).html($(this).parent().html());
        $(this).parent().empty().append(label);
    });
    $('label').click(function () {
       $('label').removeClass('selected');
       $(this).addClass('selected');
    });        
});

Answer 1

要获得此功能，您必须将输入(和描述)包装在标签中。假设你的 radio 总是在一个单独的容器中，这可以通过这段代码实现:

$('.container input[type="radio"]').each(function(index) {
    console.log($(this));
    $(this).attr('id', 'radio' + index);
    var label = $('<label />', {'for': 'radio' + index}).html($(this).parent().html());
    $(this).parent().empty().append(label);
});

工作 jsfiddle:http://jsfiddle.net/VyvpP/