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>

しかし、ラジオをチェックしても何も起こりません。

私はフィドルで試しました: http://jsfiddle.net/Ac9c4/ そして同じ結果はありません

何か案が？

4

7 に答える 7

1

@Tats_innit、@Dan、および @gdoron による他の返信は完全に正しいです。

@Tats_innit は、ラジオ ボタンの番号を取得するために派手な正規表現の一致を行いましたが、これはうまく機能しますが、私は html-* 属性を使用して、より明示的なマークアップを選択しました。また、一度に1 つの 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

これを試して：

$(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 に答える
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" は、クラス ".div1" を持つ div に "visible" というクラスを追加します。

そのクラスを追加することを忘れないでください:)

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

于 2013-11-10T21:56:30.047 に答える
-1
  1. ID がありません<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 に答える