0

私は次のことをしたい：

3 つのチェックボックスがあります。

Box1 を非表示 Box2 を非表示 Box3 を非表示

Jquery を使用して次のことを行います。

Box1 がオンの場合、ボックス 2 と 3 が非表示になり、オフの場合、ボックス 2 と 3 が表示されます。また、コードはどこに配置しますか?

前もって感謝します

4

3 に答える 3

1

コメントで指定したマークアップを使用した完全な例を次に示します。また、チェックボックスのラベルを自由に付けることもできました。つまり、テキストをクリックすると、チェックボックスが切り替わります (よりアクセスしやすく、使いやすくなります)。

JSFiddleで見る

HTML

<form>
    <div class="toggle-checkbox">
        <input type="checkbox" name="checkMeOut" id="box1" />
        <label for="box1">Hide Box1</label>
    </div>
    <div class="toggle-checkbox">
        <input type="checkbox" name="checkMeOut" id="box2" />
        <label for="box2">Hide Box2</label>
    </div>
    <div class="toggle-checkbox">
        <input type="checkbox" name="checkbox3" id="box3" />
        <label for="box3">Hide Box3</label>
    </div>
</form>

jQuery

$('.toggle-checkbox input[type=checkbox]').click(function () {
    if ($(this).is(':checked')) {
        $('.toggle-checkbox').not($(this).closest('.toggle-checkbox')).hide();
    } else {
        $('.toggle-checkbox').show();
    }
});

ページに jQuery を含めるには、<head>タグ内に以下を配置します。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
于 2013-03-03T05:09:13.793 に答える
0

タグ間でこれを行うことができます

$('.one').click(function () {
if ($(this).is(':checked')) {
    $('input[type=checkbox]').not(this).hide();
} else {
    $('input[type=checkbox]').not(this).show();
}
});

http://jsfiddle.net/davidchase03/MYASr/

于 2013-03-03T04:58:19.667 に答える
0

チェックボックスの ID が「box1」、「box2」、「box3」であると仮定します。

$(document).ready(function(){
    $("#box1").change(function(){
        $("#box2, #box3").toggle();
    }
}

私はこれをテストしていませんが、非表示ボックス 1 をオンまたはオフにすると、他の 2 つのボックスの表示が切り替わります。

コードの最適な場所は、body 終了タグの直前にある script 要素内です。

<body>
Your page stuff here
<script>
Code from above here
</script>
</body>
于 2013-03-03T04:58:57.153 に答える