Javascript 可单击的按钮，而不是单选按钮_Javascript_Jquery_Css_Internet Explorer

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

javascript jquery css internet-explorer

Javascript 可单击的按钮，而不是单选按钮,javascript,jquery,css,internet-explorer,Javascript,Jquery,Css,Internet Explorer,我想点击可点击按钮，而不是单选按钮。我在JSFIDLE上看到了一个示例，但唯一的问题是我的代码中没有标签标签。我没有访问代码的权限，因此也无法添加它们。我只能将javascript和css添加到我的CMS中。有没有办法取得成果 <div class="button1"> <input type="radio" checked="" value="1" name="question">question 1 </div> <div class="bu

我想点击可点击按钮，而不是单选按钮。我在JSFIDLE上看到了一个示例，但唯一的问题是我的代码中没有标签标签。我没有访问代码的权限，因此也无法添加它们。我只能将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>


问题1
问题2

我得到了解决方案，但它在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');
    });        
});

$（函数（）{
$（'.container input[type=“radio”]'）。每个（函数（索引）{
log（$（this））；
$（this.attr（'id'，'radio'+索引）；
var label=$（''，{'for'：'radio'+index}）.html（$（this.parent（）.html（））；
$（this.parent（）.empty（）.append（label）；
});
$（“标签”）。单击（函数（）{
$（'label'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
});        
});

如果我想你问的是，你有一个单选按钮伪装成一个可点击按钮，那么你应该：

-webkit-appearance:none

您可以使用-webkit外观隐藏单选按钮：无；和使用：在psuedo类之前，添加标签

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

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

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

$（'.container input[type=“radio”]'）。每个（函数（索引）{
log（$（this））；
$（this.attr（'id'，'radio'+索引）；
var label=$（''，{'for'：'radio'+index}）.html（$（this.parent（）.html（））；
$（this.parent（）.empty（）.append（label）；
});

工作JSFIDLE:

如果您想要这样的内容：

只需复制并粘贴：

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


$（文档）.ready（函数（）{
$（“#rad”）。单击（函数（）{
$（this.hide（）；
});
});

如果您无法访问HTML，您将如何添加按钮？我们不能使用JS和或CSS吗？我猜这是的副本？您可以使用jquery将按钮1和2的内容替换为所需的内容。或者只需将标签添加到按钮1/2，然后应用所需的css来实现您想要的“不工作”意味着什么？它会崩溃吗？它显示的是猫的图片而不是你的按钮？你太棒了！！这奏效了。。但是我的div课程对于每个收音机都是不同的，比如按钮1，按钮2。。。我应该如何管理它？如果您将第一个选择器从

.container input[type=“radio”]

更改为

input[type=“radio”]

，它将对所有收音机执行，与包装div的类无关。如果您只想转换一些收音机，而不是全部收音机，请将其更改为逗号分隔的列表：

.container1 input[type=“radio”]，.container2输入[type=“radio”]

。您可以使用所需的每个css有效选择器来选择收音机。由于某些原因，选择过程在IE中不起作用。有什么建议吗？如果我使用display:none隐藏单选按钮，则IE每次仅选择第一个选项。仅当您隐藏单选按钮时？因为这对我来说很好。你使用哪个版本的IE？