Question

我有5个复选框，只允许一个。让我们说用户点击复选框1，但如果他点击复选框2，则必须取消选中复选框1。我怎样才能做到这一点？

HTML

 <div class="form-group form-group-custom" id="checkboxes">
        <?php
        foreach ( $education_levels_array as $key => $employee ) {
            echo '
            <div class="checkbox checkbox-inline">
                <input class="educationCheckboxes" type="checkbox" name="userEducationDegree[]" id=0' . $employee['education_id'] . ' value="' . $employee['education_id'] . '" />
                <label for=0' . $employee['education_id'] . '>' . $employee['education'] . '</label>

            </div>';

        }
        ?>
    </div>

我尝试将其存储在变量中，但现在它不会让我选择任何选项。

var lastChecked;
        $(".educationCheckboxes").on("change", function () {
            console.log(lastChecked);
            if ($(this).prop("checked", true)) {
                lastChecked = $(this);
            }
            lastChecked.prop("checked",false);
        });

Answer 1

使用类change的所有复选框的educationCheckboxes事件。首先检查当前选中的复选框是否已选中。如果是，则取消选中使用类educationCheckboxes的类选择器的所有复选框。这将取消选中所有复选框，包括当前选中的复选框再次检查当前复选框。而已

$('.educationCheckboxes').change(function(){
  if($(this).is(':checked')){
    $('.educationCheckboxes').prop('checked',false);
    $(this).prop('checked',true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="educationCheckboxes">
<input type="checkbox" class="educationCheckboxes">
<input type="checkbox" class="educationCheckboxes">
<input type="checkbox" class="educationCheckboxes">

Answer 2

在您的代码中，如果选中此复选框，则取消选中当前复选框。您需要更改您执行操作的顺序。

var lastChecked = null;
$(".educationCheckboxes").on("change", function () {
    console.log(lastChecked);
    if(lastChecked && lastChecked != $(this)){
        lastChecked.prop("checked", false);
    }
    if ($(this).prop("checked", true)) {
        lastChecked = $(this);
    }
});

如何取消选中之前选中的复选框？

2 个答案: