1

特定のチェックボックスのチェックの有無でdivを表示/非表示にしたい。

.clickこれは jQueryや.change関数の使用に関するものではないことに注意してください。私の場合、これらは機能しません。

私がやろうとしているのは、チェックボックスフィールドに値がある場合は特定の div を表示しchecked="checked"、そうでない場合は非表示にすることです。

デフォルトでは何も表示/非表示にしたくありません。uncheckedチェックボックスがの場合にのみ非表示にしたい場合はchecked、div が常に表示される必要があります (ページの読み込み時でも)。

ここにフィドルへのリンクがあります（.clickアプローチであり、私には機能しません）https://jsfiddle.net/a5s5s4k3/

First Name チェックボックスはすでにチェックされていますが、隣接する div はまだ非表示になっています。

どんな助けでも大歓迎です。

ありがとう

4

3 に答える 3

2

マークアップを少し変更したい場合は、純粋な CSS でこれを行うことができます。

HTML

<p>
  <input type="checkbox" id="" name="" checked="checked" />
  <label>Enable First Name Field</label>
  <input type="text" id="" class="" name="" value="" />
</p>

<p>
  <input class="check2" type="checkbox" id="" name="" />
  <label>Enable Last Name Field</label>
  <input type="text" id="" name="" value="" />
</p>

CSS

input[type=checkbox] + label + input {
  display: none;
}

input[type=checkbox]:checked + label + input {
  display: block;
}

オペレーターは、+隣接する要素を選択します。この場合、チェックボックスの横にあるラベルの横にある入力をターゲットにしています。兄弟セレクターに慣れていない場合は、兄弟セレクターのMDN リファレンスを確認してください。彼らはかなり便利です。

更新されたフィドル: https://jsfiddle.net/a5s5s4k3/2/

于 2016-02-27T18:34:33.643 に答える
1 

    $(document).on("click", "[type='checkbox']", function(e) {
            if (this.checked) {
                $(this).attr("value", "true");
            } else {
                $(this).attr("value","false");}
        });
<input type="checkbox" name="myCheckbox" checked="checked" value="true" />

于 2016-02-27T14:04:31.887 に答える