处理 jQuery 中的多个复选框

Question

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

1. 如果用户单击 5（单选），则应自动选中前 5 个复选框，如果用户单击 6（单选），则应自动选中前 6 个复选框, 同 7 (收音机).

2. 如果 6（收音机）被 selected 并且前 6 个复选框被自动选中并且用户突然 select 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>

处理 jQuery 中的多个复选框

Handling multiple checkbox in jQuery

javascript

jquery

html

jquery-ui

jquery-events