时间戳

首页 > 解决方案 > 如何使用复选框逻辑显示 div？

jquery - 如何使用复选框逻辑显示 div？

问题描述

我在 div 中有 3 个问题（#q1、#q2、#q3）。每个问题由复选框列表中的标题和 3 个答案组成。

我需要创建以下内容：

1) 如果用户在第一个问题 (#q1) 中选中第一个答案 (A1)，则问题 2 (#q2) 应该消失，问题 3 (#q3) 应该出现，并且 A2 和 A3 的复选框应该变为未选中状态，

2) 如果用户检查第一个问题 (#q1) 中的第二个和/或第三个答案 (A2 和/或 A3)，则问题 2 (#q2) 应该出现，问题 3 (#q3) 应该消失并且复选框A1 应该成为未选中状态，

3) 如果用户检查#q2 中的任何答案，则应出现#q3。

4) 如果用户检查#q3 中的任何答案，则应出现提交按钮。

我意识到除了 2) 之外的所有内容 - 如果选中 A1，用户将无法检查 A2 或 A3。我该如何解决这个问题？

index.html:

<div id="test">
    <form method="post" action="">
        <fieldset id="q1">
            <legend>Question1</legend>
            <input type="checkbox" name="favorite_pet" value="A1" id="q1_1">
            <label for="q1_1">A1</label><br>
            <input type="checkbox" name="favorite_pet" value="A2" id="q1_2">
            <label for="q1_2">A2</label><br>
            <input type="checkbox" name="favorite_pet" value="A3" id="q1_3">
            <label for="q1_3">A3</label><br>
            <br>
        </fieldset>

        <fieldset id="q2">
            <legend>Question2 - should appear if A2 or A3 is checked</legend>
            <input type="checkbox" name="favorite_pe" value="B1" id="q2_1">
            <label for="q2_1">B1</label><br>
            <input type="checkbox" name="favorite_pe" value="B2" id="q2_2">
            <label for="q2_2">B2</label><br>
            <input type="checkbox" name="favorite_pe" value="B3" id="q2_3">
            <label for="q2_3">B3</label><br>
            <br>
        </fieldset>

        <fieldset id="q3">
            <legend>Question3 - should appear if A1 is checked</legend>
            <input type="checkbox" name="favorite_p" value="C1" id="q3_1">
            <label for="q3_1">C1</label><br>
            <input type="checkbox" name="favorite_p" value="C2" id="q3_2">
            <label for="q3_2">C2</label><br>
            <input type="checkbox" name="favorite_p" value="C3" id="q3_3">
            <label for="q3_3">C3</label><br>
            <br>
        </fieldset>

        <button type="submit" id="submit">Submit</button>
    </form>

script.js:

$(document).ready(function () {

$('#q2').addClass('hide');
$('#q3').addClass('hide');
$('#submit').addClass('hide');

$('#q1').on('change', function () {
    if ($('#q1 input[type=checkbox]').is(':checked')) {
        if ($('#q1_1').is(':checked')) {
            $('#q1_2').prop('checked', false);
            $('#q1_3').prop('checked', false);
            $('#q2').addClass('hide');
            $('#q3').removeClass('hide');
        }
        if ( $('#q1_2').is(':checked') || $('#q1_3').is(':checked') ) {
            $('#q1_1').prop('checked', false);
            $('#q2').removeClass('hide');

        }

    } else {
        $('#q2').addClass('hide');
        $('#q3').addClass('hide');
        $('#q2 input[type=checkbox]').prop('checked', false);
        $('#q3 input[type=checkbox]').prop('checked', false);
        $('#submit').addClass('hide');
    }


});

$('#q2').on('change', function () {
    if ($('#q2 input[type=checkbox]').is(':checked')) {
        $('#q3').removeClass('hide');
    } else {
        $('#q3').addClass('hide');
        $('#q3 input[type=checkbox]').prop('checked', false);
        $('#submit').addClass('hide');

    }
});

$('#q3').on('change', function () {
    if ($('#q3 input[type=checkbox]').is(':checked')) {
        $('#submit').removeClass('hide');
    } else {
        $('#submit').addClass('hide');

    }
});

});

标签： jquery

解决方案

首先你只需要 .hide() 方法用于 jQuery

 $('#q2').addClass('hide');

将会

 $('#q2').hide();

这与 .show() 相同 - 非常有用的方法！

我想我已经在这里解决了问题 2。它需要一些重构，但它们缺少条件：

https://jsfiddle.net/t0y3xqdg/

推荐阅读