可点击的按钮，而不是单选按钮

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>

我在这里有解决方案，但在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

要获得此功能，您必须将输入（和描述）包装在标签中。 假设您的收音机始终位于单独的容器中，则可以通过以下代码来实现：

$('.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/

Answer 2

如果我认为您要问的是您以可点击按钮的名义有一个单选按钮，那么您应该这样做：

-webkit-appearance:none

http://jsfiddle.net/54ek6/

您可以使用-webkit-appearance：none隐藏单选按钮； 并在伪类之前使用：before，添加标签。

这不适用于IE。 （请您知道！）

Answer 3

如果您想要这样的话：

只需复制并粘贴：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">   </script>
 <script>
$(document).ready(function(){
  $("#rad").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<input type="radio" checked="" value="1" name="question" id="rad">
</body>
</html>

可点击的按钮，而不是单选按钮

问题描述

3 个解决方案

解决方案1
1 2014-06-18 13:32:18

解决方案2
0 2014-06-18 13:30:16

解决方案3
0 2014-06-18 13:44:04

可点击的按钮，而不是单选按钮

问题描述

3 个解决方案

解决方案1 1 2014-06-18 13:32:18

解决方案2 0 2014-06-18 13:30:16

解决方案3 0 2014-06-18 13:44:04

解决方案1
1 2014-06-18 13:32:18

解决方案2
0 2014-06-18 13:30:16

解决方案3
0 2014-06-18 13:44:04