0

コードは以下のとおりです。

<label>radio 1 </label>
<input type="radio" onchange="$('input2').show()" id="radio1" name="RadioGroup">
<label>radio 2 </label>
<input type="radio" onchange="$('input2').show()" id="radio2" name="RadioGroup">
<label>radio 3 </label>
<input type="radio" onchange="$('input2').hide()" id="radio3" name="RadioGroup">

<input type="text" id="input2">

これらのコードには、次の 2 つの欠点がある可能性があります。

  1. のjqueryコードはonchange3回書く必要があります
  2. コードは、いずれかをクリック/変更onchangeしたときにのみ実行されます。つまり、これらのコードは、ページの初期化時には実行されません。たとえば、ページの初期化時に がチェックされている場合、は引き続き表示されます。radioradio3input2
4

3 に答える 3

1

これを少し再編成する簡単な jsfiddle を実行しました。

1) 入力を表示する任意のラジオ ボタンにクラスを割り当てる 2) 入力を非表示にする任意のラジオ ボタンに別のクラスを割り当てる 3) アクションを管理する別の js ファイル内の jQuery document.ready にイベントを添付します。

フィドル: http://jsfiddle.net/Kw4gu/2/

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<label>radio 1 </label>
<input type="radio" class="open" name="radioGroup" id="radio1">
<label>radio 2 </label>
<input type="radio" class="open" name="radioGroup"   id="radio2">
<label>radio 3 </label>
<input type="radio" class="close" name="radioGroup"   id="radio3">

<input type="text" id="input2">

JS

$(document).ready(function() {
    $(".open").on("change", function(event) {

        $('#input2').show();
    });

    $(".close").on("change", function(event) {

        $('#input2').hide();
    });
});​
于 2012-11-19T03:51:00.210 に答える
0

これはいくつかの方法で実行できますが、jQuery ではかなり簡単です。HTML を少し更新しました (選択しやすいように 2 つの類似したボタンに共通のクラスを指定し、すべてのボタンに同じ名前を付けて、同じボタン グループの一部になるようにしました)。

<label>radio 1 </label>
<input type="radio" class="radioButton" id="radio1" name="buttonGroup">
<label>radio 2 </label>
<input type="radio" class="radioButton" id="radio2" name="buttonGroup">
<label>radio 3 </label>
<input type="radio" id="radio3" name="buttonGroup">

<input type="text" id="input2">​

ここで、選択されているボタンに応じてフィールドを非表示または表示するセレクターを作成する必要があります。それはここに示されています：

$(function() {
    $('#input2').hide();

    $('.radioButton').on('change', function() {
        $('#input2').show();
    });
    $('#radio3').on('change', function() {
        $('#input2').hide();
    });
});​

$('#input2').hide();最初は非表示にするためだけに始めましたが、通常は CSS でそのようなことを行います。

いずれにせよ、この jsFiddle exampleでこの動作の例を見ることができます。

于 2012-11-19T04:02:44.380 に答える
0

できることの 1 つは、そのように HTML にバンドルするのではなく、Javascript を介してイベント ハンドラーを設定することです。jquery セレクターを使用してラジオ ボタンを選択し、イベントを 1 か所に追加します。

Javascript を介して処理を行うと、コードを初期化するタイミングや実行方法などの柔軟性も高まります。

于 2012-11-19T03:15:29.063 に答える