Question

我尝试使用此代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

<style type="text/css">
  div {display: none}
</style>

<script type="text/javascript">
    $('.radio1').click(function () {
        $('.div1').show();
    });
    $('.radio2').click(function () {
        $('.div2').show();
    });
</script>

<label><input type="radio" name="group1" class="radio1"></label>
<label><input type="radio" name="group1" class="radio2"></label>

<div class="div1">Radio1 selected !</div>
<div class="div2">Radio2 selected !</div>

但是当我检查任何收音机时，没有发生任何事情。

我试过小提琴：http://jsfiddle.net/Ac9c4/ 同样没有结果

有什么想法吗？

Answer 1

你需要用DOM准备好你的函数：

$(function () {
    $('.radio1').click(function () {
        $('.div1').show();
    });
    $('.radio2').click(function () {
        $('.div2').show();
    });
});

你的小提琴不包括jQuery ......
如果你检查了控制台，你会看到这个错误：

未捕获的ReferenceError：$未定义

修正jsFiddle

Answer 2

或您可以这样做：http://jsfiddle.net/y8f2p/

现在，下面的版本是位通用方法使用无线电类中的数值。 :)

休息见上面gdoron已经提到了其他一些东西！

<强>代码

$('input[type=radio]').click(function () {

    $('.div' + $(this).prop('class').match(/\d+/)).toggle(); // OR .show whatever fits your need
});

Answer 3

@ Tats_innit，@ Dan和@gdoron的其他回复是完全正确的：

你需要在jsFiddle的框架下拉列表中选择“jQuery”来包含它
将您的代码包装在dom ready中，因为您已将它放在您尝试选择的html元素之前（如果您在文档的末尾包含脚本，那么您就是金色的！）
如果您想要与特定div关联的每个单选按钮，您可以使用单击处理程序执行此操作：

@Tats_innit做了一个花哨的正则表达式匹配来获得单选按钮编号，这可以很好地工作，但我选择使用html- *属性进行更明确的标记。另外，我假设您只想一次显示一个div ，因此使用无线电控件？

HTML

<label><input type="radio" name="group1" class="radio1" data-divclass="div1"></label>
<label><input type="radio" name="group1" class="radio2" data-divclass="div2"></label>

<div class="div1 content">Radio1 selected !</div>
<div class="div2 content">Radio2 selected !</div>

的JavaScript

jQuery(document).ready(function($) {
    // select radio buttons by name
    $('[type="radio"][name="group1"]').click(function () {
        // hide all the content divs
        $('.content').hide();
        // then show the div matching the class from the html
        $('.' + $(this).data("divclass")).show(); 
    });
});

http://jsfiddle.net/Ac9c4/11/

演示

Answer 4

试试这个，它建议使用data-target属性

$( "input[type=radio]" ).on( "click", function() {
    var x = $(this).attr("data-target")
    if ($(this).is(':checked')) {   
        $(x).addClass("visible")
    }
});

在无线电元素本身上添加数据目标属性。例如data-target =“。div1” 将为类“.div1”

的div添加一个名为“visible”的类

别忘了添加那个课程:)

http://jsfiddle.net/Ac9c4/15/

Answer 5

试试这个：

$(function () {
   $('.radio1').click(function () {
       $('.div1').show();
       $('.div2').hide();
   });
   $('.radio2').click(function () {
       $('.div2').show();
       $('.div1').hide();
   });
});

Answer 6

将jQuery添加到jsfiddle库

Answer 7

<div>
您必须设置onchange

<radio>

这没有jQuery：

<label><input type="radio" onchange="document.getElementById('div1').style.display='block';document.getElementById('div2').style.display='none'" name="group1" class="radio1"></label>

<label><input type="radio" onchange=" document.getElementById('div2').style.display='block';document.getElementById('div1').style.display='none'" name="group1" class="radio2"></label>

<div id="div1" class="div1 content">Radio1 selected !</div>
<div id ="div2" class="div2 content">Radio2 selected !</div>

jsfiddle

收音机时显示Div

7 个答案:

HTML

的JavaScript