gpt4 book ai didi

javascript - 使用 JS 和 PHP 限制复选框选择

转载 作者:行者123 更新时间:2023-11-30 17:41:31 26 4
gpt4 key购买 nike

我们有一个要求限制用户对复选框的选择最多。例如,我们从数据库中读取不同的车型,并将它们放在一个表单中,供用户选择最多两种车型进行进一步处理。我们正在使用以下代码段(仅限示例代码):

<script type="text/javascript">
function KeepCount()
{
var total=0;
for (var i=0; i < document.car_form.model_selection.length; i++)
{
if(document.car_form.model_selection[i].checked) {
total =total + 1;
}
if (total > 2) {
alert('Pick Just One Please')
document.car_form.model_selection[i].checked = false ;
return false;
}
}
}
</script>

<form action="car_model.php" method="post" name="car_form" id="car_form">

<?php
$q10 = "SELECT ..."
$r10 = mysqli_query ($dbc, $q10);
if (mysqli_num_rows($r10) > 0) {
while ($row10 = mysqli_fetch_array($r10, MYSQLI_ASSOC))
{
echo '<p class="normal_text"><input type="checkbox" name="model_selection[]" value="' . $row10['model_id'] . '" onclick="return KeepCount()"; />' . $row10['car_model_name'] . '</p></br>';
}
}
?>
</form>

然而,此代码不起作用,因为即使用户选择了 2 个以上的模型,也不会抛出警告。

最佳答案

主要问题是因为你的dom路径获取checkboxes是错误的。此代码应该可以遍历所有复选框。

<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
function KeepCount() {
var elements = document.getElementsByName("model_selection[]");
var total = 0;
for(var i in elements) {
var element = elements[i];
if(element.checked) total++;
if(total>2) {
alert("pick one please");
element.checked = false;
return false;
}
}
}
</script>
<form action="car_model.php" method="post" name="car_form" id="car_form">
<p class="normal_text"><input type="checkbox" name="model_selection[]" value="id1" onclick="return KeepCount()"></p>
<p class="normal_text"><input type="checkbox" name="model_selection[]" value="id2" onclick="return KeepCount()"></p>
<p class="normal_text"><input type="checkbox" name="model_selection[]" value="id3" onclick="return KeepCount()"></p>
<p class="normal_text"><input type="checkbox" name="model_selection[]" value="id4" onclick="return KeepCount()"></p>
<p class="normal_text"><input type="checkbox" name="model_selection[]" value="id5" onclick="return KeepCount()"></p>
<p class="normal_text"><input type="checkbox" name="model_selection[]" value="id6" onclick="return KeepCount()"></p>
</form>
</body>
</html>

关于javascript - 使用 JS 和 PHP 限制复选框选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20991962/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com