2

チェックボックスをオンにすると、毎月のギフトとしてギフトを送ることができます。チェックボックスがオフの場合、ギフトは単一のギフトです。

私が持っているもの：

<div id="monthly-right">
    <input type="checkbox" name="level_autorepeat" id="level_autorepeat" value="false" /> Yes, automatically repeat this gift every year on this date.</div>
<div id="donation-length"></div>

チェックした場合に表示する必要があるもの：

<div id="monthly-right"><input type="checkbox" name="level_autorepeat" id="level_autorepeat" value="false" /> Yes, automatically repeat this gift every year on this date.</div>
<div id="donation-length">
    <input type=hidden name="sustaining.frequency" id="sustaining_frequency" value="monthly" />
    <input type="hidden" name="sustaining.duration" id="sustaining_duration" value="0" />
</div>

チェックを外すと元に戻ります

4

5 に答える 5

4

私はするだろう

$('#check').click(function() {
    var type = $(this).is(':checked') ? "checkbox" : "radio";
    var input_r_or_c = $('<input />', {
        type: type,
        name: "level_autorepeat",
        id: "level_autorepeat",
        value: "false"
    });
    if ($(this).is(':checked')) {
        var input1 = $('<input />', {
            type: "hidden",
            name: "sustaining.frequency",
            id: "sustaining_frequency",
            value: "monthly"
        });
        var input2 = $('<input />', {
            type: "hidden",
            name: "sustaining.duration",
            id: "sustaining_duration",
            value: "0"
        });
        $('#donation-length').append(input1).append(input2);
    } else {
        $('#donation-length').empty();
    }
    $('#monthly-right input').replaceWith(input_r_or_c);
});

http://jsfiddle.net/vKLWA/1/

于 2012-05-02T16:52:01.000 に答える
1

これらが非表示の入力である場合、サーバー側でこれを行います。そうしないと、javascriptが無効になっている場合、ユーザーはチェックボックスが何もしていないことに気付かず、誤って単一または繰り返しの貢献をする可能性があります。

非表示の入力を非表示にして表示しても、送信時にサーバーに送信されるかどうかには影響しません。それらを実際にDOMから削除するか、現在のフォームの外に移動する必要があります。

したがって、基本的には常に非表示の入力を送信しますが、サーバー側では、チェックボックスの値が設定されていない限り、頻度/期間を無視します。

それでもJavaScriptでそれを実行したい場合は、次のようにする必要があります。

var freq = '<input type=hidden name="sustaining.frequency" id="sustaining_frequency" value="monthly" /><input type="hidden" name="sustaining.duration" id="sustaining_duration" value="0" />';

$('#monthly-right').on('change', '#level_autorepeat', function() {
   if($(this).is(':checked')) {
       $('#level_autorepeat').html(freq);
   } else {
       $('#level_autorepeat').html("");
   }
}

他の回答は、チェックボックスがチェックされているかどうかを確認する方法を示していますが、onchangeハンドラーを使用して変更されるかどうかを実際に監視する必要があります。これは、を介して行われ.on()ます。ハンドラーを親にアタッチし、チェックボックスが変わるのを監視します。チェックボックスがオンになっている場合は、頻度/期間コード（変数に格納されている）をに追加しますdiv。それ以外の場合は、divのHTMLをクリアします。これは、フォームの外部にある別のdivにコンテンツを保持したり、コンテンツをdivに移動/コピーしたりするなど、さまざまな方法で実行できます。

于 2012-05-02T16:46:56.277 に答える
0

これは、jquery を使用してチェックボックスが「チェック」されているかどうかを確認する方法です。

$('#your_checkbox_id').is(':checked');
于 2012-05-02T16:43:27.480 に答える
0

これを試して

$('#checkBox').attr('checked');

（また）

$('#checkBox').prop('checked');

于 2012-05-02T16:44:43.557 に答える
0

あなたが使用することができます

 $('#donation-length').hide();
 if ($('#level_autorepeat').is(':checked')){
     $('#donation-length').show();
 }
于 2012-05-02T16:45:30.713 に答える