0

以下のスクリプトを使用して、チェックボックスがオンになっているかどうかに基づいてdivを表示および非表示にします。これにより、条件に同意するまでペイパルボタンを表示/非表示にできます。

しかし、今は3つの支払いオプションを提供したいので、3つのdivを開閉する必要があります。divを3回コピーしてみましたが、まだ1つしか開いていません。誰かがこれを手伝ってくれますか？

<script type="text/javascript">
function doInputs(obj){
  var checkboxs = obj.form.c1;
  var i =0, box;
  document.getElementById('mydiv').style.display = 'none';
  while(box = checkboxs[i++]){
    if(!box.checked)continue;
    document.getElementById('mydiv').style.display = '';
    break;
  }
}
</script>

<form>
  <input type="checkbox" name="c1" onclick="doInputs(this)">
</form>
<div id="mydiv" style="display:none">
  <input type="text">
</div>

また、誰かが私が別のものを追加するのを手伝ってくれて、両方がそうであるcheckboxときだけペイパルボタン（div）を表示させることができれば素晴らしいでしょう？checked

どうもありがとう！

4

5 に答える 5

1

マーカスの回答も盗みましたが、次の改善がありました。

  • jQueryドキュメントの準備完了イベントを使用して、ページの読み込み後にコードが起動するようにします
  • ロジックを単純化しました
  • 複数の支払い方法に対応

http://jsfiddle.net/5Byes/3/

于 2012-05-24T18:26:50.840 に答える
0

jQuery を使用すると、false に設定された配列または 2 つの変数のみを使用できます。ボタンがチェックされている場合、その同等の値を現在の値の反対に設定します (したがって、false の場合は true になり、その逆も同様です)。

これを実現する方法の簡単な例を次に示します: http://jsfiddle.net/5Byes/

于 2012-05-24T18:19:01.657 に答える
0

ページでは、特定の ID を持つ 1 つの要素のみが許可されます。さらに必要な場合は、class属性を使用してください。一方、div支払い方法のすべてのdivを ID の 1 つにラップして、paymentsMethodsそれを表示/非表示にすることができます。

var paymentsDiv = document.getElementById('paymentsMethods');
if (box.checked) paymentsDiv.show(); else paymentsDiv.hide();

2 つのチェックボックスが必要な場合 —onclick両方を同じハンドラに設定し、条件を に変更しbox1.checked && box2.checkedます。

$('#paymentsMethods').toogle()jQuery（質問タグにあります）を使用すると、チェックボックスのクリックで実行できます（$.hide()およびも参照$.show()）。

于 2012-05-24T18:26:56.247 に答える
0

http://jsfiddle.net/5Byes/4/

私はマーカスのフィドルを盗み、あなたが望むように更新しました。

于 2012-05-24T18:24:19.290 に答える
0

あなたが探しているものを正しく理解していれば、次のようにすることができます：

HTML:

<input id="opt1cb" type="checkbox" value="Option 1" />Option 1<br />
<input id="opt2cb" type="checkbox" value="Option 2" />Option 2<br />
<input id="opt3cb" type="checkbox" value="Option 3" />Option 3<br />

<div class="option" id="opt1">Option 1</div>
<div class="option" id="opt2">Option 2</div>
<div class="option" id="opt3">Option 3</div>
<div class="option" id="opt23">Option 2 & 3</div>

jQuery:

$('.option').hide();

$('#opt1cb').click( function() {
    if( $(this).prop("checked") ) {
        $('#opt1').show();
    } else {
        $('#opt1').hide();
    }
});

$('#opt2cb').click( function() {
    if( $(this).prop("checked") ) {
        $('#opt2').show();
        if( $('#opt3cb').prop("checked") )
            $('#opt23').show();
    } else {
        $('#opt2').hide();
        $('#opt23').hide();
    }
});

$('#opt3cb').click( function() {
    if( $(this).prop("checked") ) {
        $('#opt3').show();
        if( $('#opt2cb').prop("checked") )
            $('#opt23').show();
    } else {
        $('#opt3').hide();
        $('#opt23').hide();
    }
});

jsfiddle の作業はこちら: http://jsfiddle.net/bCDqa/

于 2012-05-24T18:29:11.243 に答える