限制用户单击时选择的复选框数量

Limiting the number of checkboxes selected by user on click

本文关键字：复选框 选择 用户 单击      更新时间：2023-09-26

我们有一些对应于不同类别的复选框。我们想限制用户一次只能选中3个复选框，所以我设置了一个警报，当超过3个类别被选中时。

<?php 
$countC = 0;
$count = 0; 
foreach($fcategories as $fvalue) {?>
<label>
<input class="group1" type="checkbox" name="catCheck[]" onclick="chkcontrol(<?php e($count)?>);" value="<?php e($fvalue['Qna_category']['id']);?>" ></input>
<?php e($fvalue['Qna_category']['category']);?></label><br/><?php $count++; }?>

和函数chkcontrol();

<script type="text/javascript">
function chkcontrol(count) {
    var msg= '';
    var done = false;
    if(count >= 3) {
        msg = "Maximum 3 categories"
        done = true;
    }
    if(done) {
        alert(msg);
    return ;
    }
}
</script>

我的问题是，警报弹出打开，但它没有删除第四个点击复选框&此外，除了消息弹出框外，尽量避免用户勾选3个以上的框。

您的代码现在有点不方便。为了阻止选择的发生，你需要在onclick事件上设置event.preventDefault()，但因为它是你的count参数，它取代了事件参数。

一个解决方法是取消选中:

if (count >= 3) {
    this.setAttribute("checked", "");
}

混合PHP和JavaScript通常会给你带来不方便的代码。最好将PHP中的相关状态序列化为JavaScript，例如:

var num_selected = <?php echo json_encode($count);?>
相关文章：