可点击按钮，而不是单选按钮 [英] clickable buttons instead of radio buttons

问题描述

我想要点击按钮，而不是单选按钮。我看到一个例子jsfiddle但唯一的问题是我没有标签标签在我的代码。我没有访问代码，所以我不能添加他们。我只能在我的CMS中添加javascript和CSS。有什么方法可以实现结果？

I want click able buttons instead of radio buttons. I saw an example on jsfiddle but only problem is I don't have labels tags in my code. I don't have access to code, so I cant add them either. I can only add javascript and css to my CMS. Is there any way to achieve results?

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

我得到解决方案此处，但在IE中不起作用。

I got solution here but its not working in 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');
    });        
});

推荐答案

要获得此功能， （和描述）。假设你的收音机总是在一个单独的容器，这是可能的这段代码：

To get this functionality, you have to wrap your inputs (and the description) in a label. Assuming that your radio is always in a seperate container, this is possible with this piece of code:

$('.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);
});

working jsfiddle： http://jsfiddle.net/VyvpP/

working jsfiddle: http://jsfiddle.net/VyvpP/

这篇关于可点击按钮，而不是单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！