Question

我想点击按钮而不是单选按钮。我在jsfiddle上看到了一个例子，但唯一的问题是我的代码中没有标签标签。我无法访问代码，所以我也无法添加它们。我只能在我的CMS中添加javascript和css。有没有办法取得成果？

<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

要获得此功能，您必须将输入（和描述）包装在标签中。假设你的收音机总是在一个单独的容器中，这可以用这段代码实现：

$('.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隐藏单选按钮;并使用：在psuedo类之前，添加标签。

这不适用于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 个答案: