0

チェックされているチェックボックスに基づいてdivを表示/非表示にするチェックボックスのセットが複数あります。これはIDを使用して実行できますが、同じページにこれらの複数のセットがあり、クラスやチェックボックスに最も近い要素を選択するなど、より一般的なセレクターが必要になります。

たぶん誰かがこれが正しく選択されていない理由を知っているか、より良い方法を知っていますか？ http://jsfiddle.net/infatti/h3rh7/

$('.check-hide-show-content').hide(); // hide all content divs

// begin show/hide
$('.check-hide-show input:checkbox').click(function () {

    $(this).parent().next('.check-hide-show-content').show();


    $(".check-hide-show input[type='checkbox']").not(this).prop("checked", false); // uncheck the other checkbox when this is checked
});
4

5 に答える 5

2

ものすごく単純：

$('.check-hide-show-content').hide(); // hide all content divs

// begin show/hide
$('.check-hide-show input:checkbox').change(function () {
    $('.check-hide-show-content').hide().eq($(this).index('.check-hide-show input:checkbox')).show();
    $(".check-hide-show input[type='checkbox']").not(this).prop("checked", false); // uncheck the other checkbox when this is checked
});
于 2013-02-12T23:31:53.777 に答える
1

入力でhtmlを使用し、data attributesidを介してdivをターゲットにするのはどうですか？ここに簡単な例をまとめました：http：//jsfiddle.net/mRZYf/

于 2013-02-12T23:27:51.463 に答える
0

クライアントが1つの要素のみをチェックできるようにする場合は、入力タイプの無線を使用できます。

<form>
<input type="radio" name="check" id="radio1"></input>
<input type="radio" name="check" id="radio2"></input>
</form>

一緒に属するラジオに同じ名前を付けるようにしてください！

于 2013-02-12T23:20:11.383 に答える
0

おそらくこれがあなたが目指していることです-http://jsfiddle.net/FloydPink/VL7Vx/1/

$('.check-hide-show-content').hide(); // hide all content divs

// begin show/hide
$('.check-hide-show input:checkbox').click(function () {
   $('.check-hide-show-content').hide(); // hide all content divs
    $('.' + $(this).val()).show();
    $(".check-hide-show input[type='checkbox']").not(this).prop("checked", false); // uncheck the other checkbox when this is checked
});

チェックボックスの値に従う新しいcssクラス（option1および）をコンテンツdivに追加することにより、マークアップにも変更を加えたことに注意してください。option2これは、チェックボックスを対応するdivに結び付ける1つの方法です。

コードで、「$（this）.parent（）。next（'。check-hide-show-content'）」を使用してチェックボックスからdivにアクセスしようとしましたが、コンテンツdivがないため成功しません。そのセレクターによって指定されたレベルで。

于 2013-02-12T23:20:53.183 に答える
0

チェックボックスが最も近い兄弟である場合、別のオプションはCSSを使用することです。

ここにフィドルの例

HTMLの例

<label>Show Div A? : </label>
<input type="checkbox">
<div>I'm Div A</div><br>

<label>Show Div B? : </label>
<input type="checkbox">
<div>I'm Div B</div><br>

<label>Show Div C? : </label>
<input type="checkbox">
<div>I'm Div C</div><br>

CSSの例

div {
  display: none;
}

input:checked + div {
  display: block;
}
于 2019-07-23T11:12:21.487 に答える