2

次のコードを使用して、ページの読み込み時にチェックボックスがチェックされているかどうかをテストしています。そうである場合、特定の追加フィールドが表示されます (myfield と呼ばれます)。

<style>
#myfield {
    display: none;
}
</style>    


<input type="checkbox" id="mycheckbox" name="mycheckbox" />

<input type='text' id='myfield' name='myfield' />


<script>
if ($("#mycheckbox").is(":checked")) {
document.getElementById("id").style.display="block";
}
</script>

ただし、これはページが読み込まれ、チェックボックスが既にチェックされている場合にのみ機能します。ページの読み込み時にボックスがチェックされていない場合、ライブでは機能せず、ボックスをクリックします。ページをリロードしなくても、ボックスが「チェック」されたときに隠しフィールドがすぐに表示されるようにします。次に、ボックスがチェックされていないときに myfield をすぐに非表示にします。

誰でもこれを行うためのより良い/適切な方法を指摘できますか?

さらに：

注: ラベルを使用して CSS でこれを行う方法は知っていますが、それ以外の場合は JavaScript を使用する必要があります。

CSS だけを使用して最新のブラウザーで問題なく動作するのは次のとおりです: http://jsfiddle.net/3KTC3/

CSSのみのjsfiddleコードは次のとおりです。

<style type="text/css">
.label-for-check {
    display:none;
}

.check-with-label:checked + .label-for-check {
display:block;  
}
</style>   


<div>
<input type="checkbox" id="check" class="check-with-label" />
  <label for="check" class="label-for-check">

        <br /><br />MyField<br />
    <input type='text' id='myfield' name='myfield' size='10'  />
</label>
<div>
4

3 に答える 3

1 
$(document).ready(function(){
    if($("#mycheckbox").is(":checked")) $('#myfield').show();

    $('#mycheckbox').on('change', function(){
        if($(this).is(":checked")) {
            $('#myfield').show();
        } else {
            $('#myfield').hide();
        }
    })
});
于 2013-03-14T17:51:04.770 に答える
1

changeイベント ハンドラをアタッチする必要があります。投稿されたコードは、ページが読み込まれたときにのみ実行され、要素の状態を監視しません。

クラスと隣接するセレクターを備えた CSS バージョンに相当する jQuery を次に示します。

$('.check-with-label').change(function() {
    $(this).next().toggle(this.checked);
}).change();

フィドル

説明:thisクリックされているチェックボックスを参照し、チェックボックスのチェック状態に基づいて要素 (CSSセレクターnextに相当) とその表示を取得します。+toggle

指定された 2 つの ID でのみ動作する別のバージョン:

$('#mycheckbox').change(function() {
    $('#myfield').toggle(this.checked);
}).change();

フィドル

CSS のバージョンは、IE7 以降を含むすべてのデスクトップ ブラウザーと互換性があることに注意してください。これには JS を使用する必要があるかどうかを検討してください。

編集:変更ハンドラーをアタッチした後にトリガーする必要があるため、ページが読み込まれたときにチェックボックスが既にオンになっている場合、トリガーされたハンドラーはフィールドを表示します。

于 2013-03-14T17:47:19.270 に答える
1

あなたの問題は、チェックボックスがオンになっている場合、jQuery が 1 回だけ (サイトをロードするとき) チェックすることです。

変更ハンドラーは、ユーザーがチェックボックスを変更するたびに起動し、チェックされている場合は表示されます#myfield

次のようにします。

$('#mycheckbox').change(function() {
    if ($(this).is(":checked")) {
      $('#myfield').show()
    }
});
于 2013-03-14T17:53:09.637 に答える