如果 select 每天取消選中所有其他復選框（復選框）

Question

我創建了電子商務網站，有 package 問題形式，如用戶可以自定義 package。 第一個問題中有三個單選按鈕：

 1. Daily
 2. Weekly
 3. Monthly

當我daily select 時隱藏 2 個問題，如果我weekly or monthly select 則顯示兩個問題，這兩個問題是：

 1. How many days you need service in a week?
 2. Select the days.

有一張預覽卡，讓我給你看截圖，這里是截圖：
見截圖 1
見截圖 2
見截圖 3
現在，在第三個（最后一個）屏幕截圖中看到，如果我點擊返回daily單選框，則隱藏了 2 個問題，但預覽卡中沒有隱藏文本，我希望如果我點擊/點擊返回daily單選按鈕，然后應該取消選中兩個問題（我隱藏的問題），並且應該從預覽卡中刪除文本。
這是 html 代碼：

<div class="select_package_validity">
    <h5 class="h5-responsive font-weight-bold q1_text"></h5>
    <div class="package_validity_child">
        <div class="custom-control custom-radio custom-control-inline plan_name_daily">
            <input type="radio" class="custom-control-input plan_name" id="daily" name="plan_name_selector" value="Daily">
            <label class="custom-control-label" for="daily">Daily</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline plan_name_weekly">
            <input type="radio" class="custom-control-input plan_name" id="weekly" name="plan_name_selector" value="Weekly">
            <label class="custom-control-label" for="weekly">Weekly</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline plan_name_monthly">
            <input type="radio" class="custom-control-input plan_name" id="monthly" name="plan_name_selector" value="Monthly">
            <label class="custom-control-label" for="monthly">Monthly</label>
        </div>
    </div>
    <input type="hidden" name="plan_name" class="form-control selected_plan_name" />
</div>
<div class="select_days mt-4">
    <h5 class="h5-responsive font-weight-bold q2_text"></h5>
    <div class="custom-control custom-radio custom-control-inline ml-4">
        <input type="radio" class="custom-control-input plan_days" id="5" name="plan_days_selector" value="5">
        <label class="custom-control-label" for="5">5</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" class="custom-control-input plan_days" id="6" name="plan_days_selector" value="6">
        <label class="custom-control-label" for="6">6</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" class="custom-control-input plan_days" id="7" name="plan_days_selector" value="7">
        <label class="custom-control-label" for="7">7</label>
    </div>
    <input type="hidden" name="plan_days" class="form-control selected_plan_days" />
</div>
<div class="days_names mt-4">
    <h5 class="h5-responsive font-weight-bold q3_text mb-2"></h5>
    <div class="ml-4">
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="monday" name="day_name_selector" value="Monday">
            <label class="custom-control-label" for="monday">Monday</label>
        </div>
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="tuesday" name="day_name_selector" value="Tuesday">
            <label class="custom-control-label" for="tuesday">Tuesday</label>
        </div>
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="wednesday" name="day_name_selector" value="Wednesday">
            <label class="custom-control-label" for="wednesday">Wednesday</label>
        </div>
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="thursday" name="day_name_selector" value="Thursday">
            <label class="custom-control-label" for="thursday">Thursday</label>
        </div>
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="friday" name="day_name_selector" value="Friday">
            <label class="custom-control-label" for="friday">Friday</label>
        </div>
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="saturday" name="day_name_selector" value="Saturday">
            <label class="custom-control-label" for="saturday">Saturday</label>
        </div>
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="sunday" name="day_name_selector" value="Sunday">
            <label class="custom-control-label" for="sunday">Sunday</label>
        </div>
    </div>
    <input type="hidden" class="form-control selected_days_names" name="days_names" />
</div>

這是 jQuery 代碼：

$(document).ready(function() {

    $('.q1_text').text("1. Select your package validity.");
    $('.q2_text').text("2. How many days you need service in a week?");
    $('.q3_text').text("3. Select the days.");

    $('input[name="plan_name_selector"]:first').attr("checked", true);
    check_plan_name_selector();
    check_plan_name();

    $('.plan_name').change(function() {
        check_plan_name();
    });

    $("input[name='plan_name_selector']").click(function() {
        check_plan_name_selector();
    });

    function check_plan_name() {
        var plan_name = $(".selected_plan_name").val();
        if (plan_name === 'Daily') {
            $('.q4_text').text("2. Select your food time");
            $('.days_names').hide();
            $('.select_days').hide();
        } else {
            $('.q4_text').text("4. Select your food time");
            $('.days_names').show();
            $('.select_days').show();
        }
    }

    function check_plan_name_selector() {
        var value = $("input[name='plan_name_selector']:checked").val();
        $('.selected_plan_name').val(value);
        $('.selected_plan_nameVal').html("You have choosed <b>" + value + "</b> validity.");
    }

    $("input[name='day_name_selector']").on('change', function(e) {
        var limit = $("input[name='plan_days_selector']:checked").val();
        if ($("input[name='day_name_selector']:checked").length > limit) {
            $(this).prop('checked', false);
        }
    });

    $(".plan_days").change(function() {
        let days = this.value;
        $("input[name='day_name_selector']").each(function(index) {
            this.checked = index < days;
        }).trigger('change');
    });

    $("input[name='day_name_selector']").change(function() {
        var final = $('input[name="day_name_selector"]:checked').map(function() {
            return $(this).val();
        }).get();
        $('.selected_days_names').val(final.join(", "));
        $('.selected_days_namesVal').html("You have choosed <b>" + final.join(", ") + "<br>");
    });

    $("input[name='plan_days_selector']").click(function() {
        check_plan_days_selector();
    });

    function check_plan_days_selector(){
        var value = $("input[name='plan_days_selector']:checked").val();
        $(".selected_plan_days").val(value);
        $(".selected_plan_daysVal").html("<b>"+value+"</b> days service.");
    }

});

我的網站已經上線，你可以從這里查看Foodbox.pk ，我卡住了，請幫助我

Answer 1

只需在您的 function 內處理它們：

function check_plan_name() {
        var plan_name = $(".selected_plan_name").val();
        if (plan_name === 'Daily') {
            $('.q4_text').text("2. Select your food time");
            $('.days_names').hide();
            $('.select_days').hide();
            $('.selected_days_namesVal').hide(); //Hide them when Daily is selected
            $('.selected_plan_daysVal').hide();
        } else {
            $('.q4_text').text("4. Select your food time");
            $('.days_names').show();
            $('.select_days').show();
            $('.selected_days_namesVal').show(); // Show them when not
            $('.selected_plan_daysVal').show();
        }
    }

Answer 2

我做到了，它像冠軍一樣完美。

function check_plan_name() {
    .......
    if (plan_name === 'Daily') {
        ........
        $('.selected_days_namesVal').empty();
        $('.selected_plan_daysVal').empty();
        $('input[name="plan_days_selector"]').each(function() {
            this.checked = false;
        });
        $('input[name="day_name_selector"]').each(function() {
            this.checked = false;
        });
        $('.selected_plan_days').attr('value', '');
        $('.selected_days_names').attr('value', '');
    }
}