如何限制动态复选框 [英] How to give limitation to dynamic checkboxes
问题描述
我面临一个复选框问题，一个复选框的动态名称buy[].我想给出一个限制.用户只能选择 5 或 6 个复选框.复选框来自数据库表行基.清晰而简单的问题.我已经对其进行了编码，但是如果选择复选框 name='bye'，则几乎不需要帮助，那么我的脚本可以运行，但是 forEach 不起作用.给我一个选择有限的动态复选框的解决方案.
I face a checkbox problem, dynamic name of a checkbox buy[]. I want to give a limitation. User can select only 5 or 6 checkboxes. Checkboxes come from database table row base. Clear and simple question. I already coding it but need little help if choice checkbox name='bye', then my script works, but forEach does not work. Give me solution for dynamic checkboxes with limited selection.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" media="all">
<script type="text/javascript">
/***********************************************
* Limit number of checked checkboxes script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
function checkboxlimit(checkgroup, limit){
var checkgroup=checkgroup
var limit=limit
for (var i=0; i<checkgroup.length; i++){
checkgroup[i].onclick=function(){
var checkedcount=0
for (var i=0; i<checkgroup.length; i++)
checkedcount+=(checkgroup[i].checked)? 1 : 0
if (checkedcount>limit){
alert("You can only select a maximum of "+limit+" courses")
this.checked=false
}
if (checkedcount>limit){
alert("You can only select a maximum of "+limit+" courses")
this.checked=false
}
}
}
}
</script>
<style type="text/css">
.table tr th {border:1px solid #008080}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form action='registration_courses_add.php' autocomplete="off" method='post' id="world" name="world" >
<input type="submit" name="" value="Submit" id="ctl00_MainContainer_btnLoad" class="button-margin SearchKey">
<h3>Please select course for registration : </h3>
<p style="color:green">Note: You can select maximum 6 courses </p>
<table align="center" tabindex="6" cellspacing="0" rules="all" border="1" id="ctl00_MainContainer_gvRegisteredCourse" style="width: 98%;
border-collapse: collapse;
margin-left: 17px;">
<tr style=" color: White;
background-color: SeaGreen;
height: 25px;">
<th>Course id</th>
<th>Course title</th>
<th>Course credits</th>
<th>Course status</th>
<th>Selection</th>
</tr>
<?php
$db=require "script_database/connect.php";
$query = "
select
c.course_id,c.id,
c.course_title,
c.course_credits,
c.course_status
from course c
where
c.course_id NOT IN (select course_id from completed_course where student_id='1229CSE00241')
group by c.id
";
$run=mysql_query($query);
while($row=mysql_fetch_array($run)){
$post_id=$row['course_id'];
$post_date=$row['course_title'];
$post_author=$row['course_credits'];
$post_title=$row['course_status'];
?>
<tr align="center" >
<td><?php echo $post_id; ?></td>
<td><?php echo $post_date; ?></td>
<td><?php echo $post_author; ?></td>
<td><?php echo $post_title; ?></td>
<td><?php print "<input type='checkbox' name='buy[]' value='{$row['id']}' /> "?></td>
//if i change buy[] to bye then check box limit work but foreach{} not work for check box
</tr>
<?php } ?>
</table>
</form>
<script type="text/javascript">
//Syntax: checkboxlimit(checkbox_reference, limit)
checkboxlimit(document.forms.world.buy, 6)
//here is the problem
</script>
</body>
</html>
推荐答案
这里是一个纯 javascript 方法.这将允许您将该功能用于多个表单/一组复选框
Here is a pure javascript method. This is will allow you to use the function for more than one form/group of checkboxes
在这里，我为选择器的元素添加了一个类名，如果您不想使用类名，我已经注释掉了另一种方式
Here I have added a classname to the elements for my selector, i have commented out another way if you don't want to use a class name
带类名:
var boxes=document.getElementsByClassName('boxes');
没有类名:
var boxes=document.querySelectorAll("input[type=checkbox]");
我使用了自定义数据属性来设置元素组的最大复选框数量.这将允许函数根据设置的 data-max 属性和名称以不同的限制运行.
I have used a custom data attribute to set the maximum amount of checkboxes for the group of elements. This will allow the function to run with different limits depending on the set data-max attribute and name.
function limit(){
var count=0;
//Get all elements with the class name of Boxes
var boxes=document.getElementsByClassName('boxes');
// ---- Or ------
//Get all input elements with the type of checkbox.
//var boxes=document.querySelectorAll("input[type=checkbox]");
//(this) is used to target the element triggering the function.
for(var i=0; i<boxes.length; i++){
//If checkbox is checked AND checkbox name is = to (this) checkbox name +1 to count
if(boxes[i].checked&&boxes[i].name==this.name){count++;}
}
//If count is more then data-max="" of that element, uncheck last selected element
if(count>this.getAttribute("data-max")){
this.checked=false;
alert("Maximum of "+this.getAttribute("data-max")+".");
}
}
//----Stack Overflow Snippet use---\\
window.onload=function(){
var boxes=document.getElementsByClassName('boxes');
// Use if you don't want to add a class name to the elements
//var boxes=document.querySelectorAll("input[type=checkbox]");
for(var i=0; i<boxes.length; i++){
boxes[i].addEventListener('change',limit,false);
}
}<b>Name:</b> bye[] <b>Limit:</b> 5<br>
<input type="checkbox" class="boxes" data-max="5" name="bye[]"/>
<input type="checkbox" class="boxes" data-max="5" name="bye[]"/>
<input type="checkbox" class="boxes" data-max="5" name="bye[]"/>
<input type="checkbox" class="boxes" data-max="5" name="bye[]"/>
<input type="checkbox" class="boxes" data-max="5" name="bye[]"/>
<input type="checkbox" class="boxes" data-max="5" name="bye[]"/>
<hr/>
<b>Name:</b> hello[] <b>Limit:</b> 2<br>
<input type="checkbox" class="boxes" data-max="2" name="hello[]"/>
<input type="checkbox" class="boxes" data-max="2" name="hello[]"/>
<input type="checkbox" class="boxes" data-max="2" name="hello[]"/>如果你不想使用 window.onload 来设置你的事件监听器，你可以简单地将 onchange 属性添加到你的复选框元素 onChange="limit(this)" 并更改 function limit(e){ 并将所有 this 替换为 e
If you don't want to use window.onload to set your eventlisteners you can simply add the onchange attribute to your checkbox elements onChange="limit(this)" and change function limit(e){ and replace all this to e
如果您有任何问题，请在下方留言，我会尽快回复您！
If you have any questions please leave a comment below and I will get back to you as soon as possible!
我希望这会有所帮助.快乐编码！
I hope this helps. Happy coding!
这篇关于如何限制动态复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
