2

我尝试使用此代码：

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

但是当我检查任何收音机时，什么都没有发生。

我用 Fiddle 试过：http: //jsfiddle.net/Ac9c4/ 同样没有结果

任何想法？

4

7 回答 7

2

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

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

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

未捕获的 ReferenceError：$ 未定义

修复了 jsFiddle

于 2013-11-10T21:21:33.477 回答
1

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

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

休息看上面gdoron已经提到了一些其他的事情！

代码

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

    $('.div' + $(this).prop('class').match(/\d+/)).toggle(); // OR .show whatever fits your need
});
于 2013-11-10T21:27:32.687 回答
1

@Tats_innit、@Dan 和 @gdoron 的其他回复绝对正确：

  • 您需要在 jsFiddle 的框架下拉列表中选择“jQuery”才能将其包含在内
  • 将您的代码包装在dom中，因为您已将其放在您尝试选择的 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/

于 2013-11-10T21:43:59.767 回答
0

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

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

在 radio 元素本身上添加 data-target 属性。例如 data-target=".div1" 将添加一个名为 "visible" 的类到类 ".div1" 的 div

不要忘记添加该类:)

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

于 2013-11-10T21:56:30.047 回答
0

尝试这个：

$(function () {
   $('.radio1').click(function () {
       $('.div1').show();
       $('.div2').hide();
   });
   $('.radio2').click(function () {
       $('.div2').show();
       $('.div1').hide();
   });
});
于 2015-04-09T10:56:18.953 回答
0

将 jQuery 添加到 jsfiddle 库

于 2015-04-09T11:00:35.137 回答
-1
  1. 你没有身份证<div>
  2. 你必须设置的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

于 2013-11-10T21:50:19.867 回答