可点击按钮而不是单选按钮答案

【问题标题】：clickable buttons instead of radio buttons可点击按钮而不是单选按钮
【发布时间】：2014-06-23 23:58:46
【问题描述】：

我想要可点击的按钮而不是单选按钮。我在 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');
    });        
});

【问题讨论】：

如果您无法访问 HTML，您将如何添加按钮？
我们不能使用 JS 或 CSS 吗？
我猜这是stackoverflow.com/questions/8584098/…的副本？
您可以使用 jquery 将 button1 和 2 的内容替换为所需的内容。或者只是将标签添加到 button1/2 然后应用所需的 css 来实现你想要的
“不工作”是什么意思？它使IE崩溃？它显示的是猫的图片而不是你的按钮？

标签： javascript jquery css internet-explorer

【解决方案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/

【讨论】：

你摇滚！！这行得通.. 但是我的 div 类对于每个单选来说都是不同的，即 button1、button2 ...我应该如何管理它？
如果您将第一个选择器从 .container input[type="radio"] 更改为 input[type="radio"]，它将在所有收音机上执行，与包装 div 的类无关。如果您只想转换一些收音机，而不是全部，请将其更改为逗号分隔的列表：.container1 input[type="radio"], .container2 input[type="radio"]。您可以使用所需的每个 css 有效选择器来选择收音机。
由于某些原因，选择过程在 IE 中不起作用。有什么建议吗？
如果我使用 display:none 隐藏单选按钮，那么 IE 每次只选择第一个选项。
仅当您隐藏单选按钮时？因为这对我来说很好。你用的是哪个版本的IE？

【解决方案2】：

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

-webkit-appearance:none

http://jsfiddle.net/54ek6/

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

这在 IE 上不起作用。（请注意！）

【讨论】：

【解决方案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>

【讨论】：