javascript - 在 jQuery 中处理多个复选框

Question

我有一个 html 格式的问题表。我正在处理带有单选按钮的复选框。
屏幕截图:
我希望它像这样工作:

1. 如果用户单击 5(单选)，则应自动选中前 5 个复选框，如果用户单击 6(单选)，则应自动选中前 6 个复选框，与 7 相同( radio )。

2. 如果选择 6(单选)并且自动选中前 6 个复选框，并且用户突然选择 5(单选)(从 6 更改为 5)，则 6 个复选框(即 6)应为负值1，我的意思是取消选中 1，与 7(单选)相同。

我已经尝试过这个，但它会检查所有复选框。

$(".plan_day_5").click(function(){
    $("input[name='day_name_selector']").prop('checked', true);
    if ($("input[name='day_name_selector']:checked").length > 5) {
         $("input[name='day_name_selector']").prop('checked', false);
    }
});

HTML 代码:

<div class="select_package_validity">
    <h5 class="h5-responsive font-weight-bold">1. Select your package validity.</h5>
    <div>
        <input type="radio" class="custom-control-input plan_name" id="weekly" name="plan_name_selector" value="Weekly">
        <input type="radio" class="custom-control-input plan_name" id="monthly" name="plan_name_selector" value="Monthly">
    </div>
    <input type="hidden" name="plan_name" class="form-control selected_plan_name" />
</div>
<div class="select_days">
    <h5 class="h5-responsive font-weight-bold q2_text">2. How many days you need service in a week?</h5>
    <div>
        <input type="radio" class="custom-control-input plan_days plan_day_5" id="5" name="plan_days_selector" value="5">
        <input type="radio" class="custom-control-input plan_days plan_day_6" id="6" name="plan_days_selector" value="6">
        <input type="radio" class="custom-control-input plan_days plan_day_7" id="7" name="plan_days_selector" value="7">
    </div>
    <input type="hidden" name="plan_days" class="form-control selected_plan_days" />
</div>
<div class="days_names">
    <h5 class="h5-responsive font-weight-bold q3_text">3. Select the days.</h5>
    <div>
        <input type="checkbox" class="custom-control-input" id="monday" name="day_name_selector" value="Monday">
        <input type="checkbox" class="custom-control-input" id="tuesday" name="day_name_selector" value="Tuesday">
        <input type="checkbox" class="custom-control-input" id="wednesday" name="day_name_selector" value="Wednesday">
        <input type="checkbox" class="custom-control-input" id="thursday" name="day_name_selector" value="Thursday">
        <input type="checkbox" class="custom-control-input" id="friday" name="day_name_selector" value="Friday">
        <input type="checkbox" class="custom-control-input" id="saturday" name="day_name_selector" value="Saturday">
        <input type="checkbox" class="custom-control-input" id="sunday" name="day_name_selector" value="Sunday">
    </div>
    <input type="hidden" class="form-control selected_days_names" name="days_names" />
</div>

我的 jQuery 代码:

<script>
    $(document).ready(function() {
        $('.plan_name').click(function(){
            $('.select_days').css('display', 'block');
        });
        $('.plan_days').click(function(){
            $('.days_names').css('display', 'block');
        });
        $("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_day_5").click(function(){
            $("input[name='day_name_selector']").prop('checked', true);
            if ($("input[name='day_name_selector']:checked").length > 5) {
                $("input[name='day_name_selector']").prop('checked', false);
            }
        });
    });
</script>
<script>
    $(document).ready(function() {
        $("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(", "));
        });
    });
</script>
<script>
    $(document).ready(function() {
        $("input[name='plan_name_selector']").click(function() {
            var value = $("input[name='plan_name_selector']:checked").val();
            $('.selected_plan_name').val(value);
        });
    });
</script>
<script>
    $(document).ready(function() {
        $("input[name='plan_days_selector']").click(function() {
            var value = $("input[name='plan_days_selector']:checked").val();
            $(".selected_plan_days").val(value);
        });
    });
</script>

我已经告诉过你我希望它如何工作，就像验证或 UX(用户体验)。
请帮我做到这一点。

Answer 1

您可以通过使用 jquery each 迭代复选框来更改值

this.checked = index < days //(boolean)

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

$("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);
  }
});

$("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(", "));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select_package_validity">
  <h5 class="h5-responsive font-weight-bold">1. Select your package validity.</h5>
  <div>
    <input type="radio" class="custom-control-input plan_name" id="weekly" name="plan_name_selector" value="Weekly">
    <input type="radio" class="custom-control-input plan_name" id="monthly" name="plan_name_selector" value="Monthly">
  </div>
  <input type="hidden" name="plan_name" class="form-control selected_plan_name" />
</div>
<div class="select_days">
  <h5 class="h5-responsive font-weight-bold q2_text">2. How many days you need service in a week?</h5>
  <div>
    <input type="radio" class="custom-control-input plan_days plan_day_5" id="5" name="plan_days_selector" value="5">
    <input type="radio" class="custom-control-input plan_days plan_day_6" id="6" name="plan_days_selector" value="6">
    <input type="radio" class="custom-control-input plan_days plan_day_7" id="7" name="plan_days_selector" value="7">
  </div>
  <input type="hidden" name="plan_days" class="form-control selected_plan_days" />
</div>
<div class="days_names">
  <h5 class="h5-responsive font-weight-bold q3_text">3. Select the days.</h5>
  <div>
    <input type="checkbox" class="custom-control-input" id="monday" name="day_name_selector" value="Monday">
    <input type="checkbox" class="custom-control-input" id="tuesday" name="day_name_selector" value="Tuesday">
    <input type="checkbox" class="custom-control-input" id="wednesday" name="day_name_selector" value="Wednesday">
    <input type="checkbox" class="custom-control-input" id="thursday" name="day_name_selector" value="Thursday">
    <input type="checkbox" class="custom-control-input" id="friday" name="day_name_selector" value="Friday">
    <input type="checkbox" class="custom-control-input" id="saturday" name="day_name_selector" value="Saturday">
    <input type="checkbox" class="custom-control-input" id="sunday" name="day_name_selector" value="Sunday">
  </div>
  <input type="hidden" class="form-control selected_days_names" name="days_names" />
</div>