无法限制所选复选框的数量(尝试了多个代码段)
Cannot limit number of checkboxes selected (tried multiple snippets)
我有一个表单,它打印出存储在数据库中的问题列表。用户应该最多选择10个复选框,但我的javascript似乎被忽略了。我是不是在遗漏一些基本的东西来让它发挥作用?我正在用LAMP在一个虚拟机中创建这个。我试过在Eclipse和浏览器中运行代码,但什么也没发生。这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Question Selection</title>
<script type="text/javascript">
function chkcontrol(j) {
var total = 0;
for (var i = 0; i < document.questions.questions.length; i++) {
if (docment.questions.questions[i].checked) {
total = total + 1;
}
if (total > 10) {
alert("Please select only 10 questions");
document.questions.questions[i].checked = false;
return false;
}
}
}
</script>
</head>
<body>
<?php echo "<br />"; ?>
<form id="questions" name="questions" action="GenerateQuiz" method="post">
<table border="2" style="margin:0 auto; padding:5px">
<thead>
<tr>
<th>Questions</th>
<th>Include in Quiz</th>
</tr>
</thead>
<tbody>
<?php
$count = 1;
// Print a row for each record in the returned query
foreach($questionList as $key => $row) {
echo "
<tr>
<td style='text-align:left;'>$row[questionText]</td>
<td style='text-align:center;'><input type='checkbox' name='questions[]' onclick='chkcontrol($count)' value='$row[questionText]' /></td>
</tr>";
$count++;
}
?>
</tbody>
</table>
<div align="center">
<br />
<input type="submit" value="Take Quiz" />
</div>
</form>
</body>
</html>
chkcontrol = function(j) {
var total = 0;
var questions = document.getElementsByName('questions[]');
for (var i = 0; i < questions.length; i++) {
if (questions[i].checked) {
total = total + 1;
}
if (total > 10) {
alert("Please select only 10 questions");
questions[i].checked = false;
return false;
}
}
}
是你的chkcontrol功能应该是什么样子。你不需要jQuery来做这件事,你已经完成了大部分工作!
请参阅此处的工作示例:https://jsfiddle.net/wr58739c/4/
我已经在jquery中尝试过了,这会更容易。我已经静态地创建了一些问题,您可以从数据库中循环您的问题。在这里,我限制用户只能选择两个问题$('.quesCheck:checked').length>2。您可以将其更改为10
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','.quesCheck',function()
{
if($('.quesCheck:checked').length > 2)
{
alert("Please select only 2 question");
return false;
}
});
});
</script>
</head>
<body>
<table>
<tr><td>What is thunder ?</td><td><input type="checkbox" name='questions[]' class="quesCheck" /></td></tr>
<tr><td>What is lightning?</td><td><input type="checkbox" name='questions[]' class="quesCheck" /></td></tr>
<tr><td>What is chain reaction?</td><td><input type="checkbox" name='questions[]' class="quesCheck" /></td></tr>
</table>
</body>
用你的脚本试试这个:
<script type="text/javascript">
function chkcontrol(j) {
var checkboxes = document.querySelectorAll('#questions input[type="checkbox"][name="questions[]"]');
var total = 0;
for (var i = 0; i < checkboxes.length; i++) {
if (document.checkboxes[i].checked) {
total = total + 1;
}
if (total > 10) {
alert("Please select only 10 questions");
document.checkboxes[i].checked = false;
return false;
}
}
}
</script>
使用该代码,您可以确保从正确的表单中获得正确的复选框。
相关文章:
- 无法限制所选复选框的数量(尝试了多个代码段)
- Jquery在初始页面加载时选中复选框时显示链接的代码
- 如何防止jQuery中复选框单击时执行多个代码
- 为什么这个jQuery代码检查所有复选框不起作用
- KO 绑定复选框:从代码更改“选中”属性,不更改可观察字段
- 嗨,我正试图将我的movieprice数组从复选框值传递给另一个计算选择总数的函数,但我的代码没有;t运行
- C#/ASP-web,ASP:在客户端执行复选框消息框,如果是,则运行服务器端代码
- 用Javascript编写一行代码以确保选中复选框
- 编写一个代码来拆分字符串“test”,并将Name的值分配给文本框,将ok的值分配到复选框
- 我需要在函数中编写addEventListener代码,每次选中复选框时都会执行该函数
- 在IE8中查找复选框时,我的代码有什么区别
- 任何人都可以帮助我编写代码,以便在 extjs 4.2 的组合框中制作带有复选框的面板
- 在运行时添加复选框并将其保存在 HTML 文件代码中
- 所需的 JavaScript 代码复选框
- 访问代码隐藏中动态创建的 html 复选框
- 复选框检查器在表中不起作用.代码在没有表标记的情况下工作
- 我怎样才能纠正这个jquery / js复选框代码
- 如何在选择框中设置只读 false,当选中复选框时,它将是可编辑的.在我的jquery代码中,禁用不起作用
- 选中复选框代码不起作用 if($('#primayins').attr('checked'
- 代码点火器 - jQuery 数据表 搜索和分页时不会保留复选框中的选中值