javascript - 如何限制动态复选框-6ren

javascript - 如何限制动态复选框

转载作者：行者123 更新时间：2023-11-29 12:12:13

25

4

我面临一个复选框问题，一个复选框的动态名称 buy[]。我想给出一个限制。用户只能选择 5 或 6 个复选框。复选框来自数据库表行库。清晰而简单的问题。我已经对其进行了编码，但如果选择复选框 name='bye' ，则需要很少的帮助，那么我的脚本可以工作，但 forEach 不起作用。为我提供有限选择的动态复选框的解决方案。

    <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方法。这将允许您将该功能用于多个表单/一组复选框

这里我为选择器的元素添加了一个类名，如果您不想使用类名，我已经注释掉了另一种方式

带有类名:

var boxes=document.getElementsByClassName('boxes');

没有类名:

var boxes=document.querySelectorAll("input[type=checkbox]");

我使用了自定义数据属性来设置元素组的复选框的最大数量。这将允许函数根据设置的 data-max 属性和名称以不同的限制运行。

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

如果您有任何疑问，请在下面留言，我会尽快回复您!

我希望这有帮助。快乐编码!

关于javascript - 如何限制动态复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30441866/

25

4

0

文章推荐： php - $_POST 冲突？

文章推荐： ios - 如何控制 UIActivityIndicatorView 的旋转？

文章推荐： mysql - ExecuteNonQuery 在必须删除大量行时不删除

c# - 限制/限制 serviceBus 队列以触发 ServiceBusTrigger 形式的消息
我有一个 ServiceBusQueue(SBQ)，它获取大量消息负载。我有一个具有 accessRights(manage) 的 ServiceBusTrigger(SBT)，它不断轮询来自 SBQ
mysql - 对特定列应用 SQL 限制，而不是对完整结果集应用 SQL 限制
在下面给出的结果集中，有 2 个唯一用户 (id)，并且查询中可能会出现更多此类用户: 这是多连接查询: select id, name, col1Code, col2Code, col2Va
python - 限制/限制 GRequests 中 HTTP 请求的速率
我正在用 Python 2.7.3 编写一个带有 GRequests 的小脚本和 lxml 可以让我从各种网站收集一些收藏卡价格并进行比较。问题是其中一个网站限制了请求的数量，如果我超过它，就会发回
database - 跟进【删除(级联/限制)】和更新(级联/限制)
我想知道何时实际使用删除级联或删除限制以及更新级联或更新限制。我对使用它们或在我的数据库中应用感到很困惑。最佳答案在外键约束上使用级联运算符是一个热门话题。理论上，如果您知道删除父对象也将自动删
SQL where 限制
下面是我的输出，我只想显示那些重复的名字。每个名字都是飞行员，数字是飞行员驾驶的飞机类型。我想显示驾驶不止一架飞机的飞行员的姓名。我正在使用 sql*plus PIL_PILOTNAME
NativeScript 限制
我正在评估不同的移动框架，我认为 nativescript 是一个不错的选择。但我不知道开发过程是否存在限制。例如，我对样式有限制(这并不重要)，但我想知道将来我是否可以有限制并且不能使用某些 nat
GrailsDataBinder 限制？
我正在尝试使用 grails 数据绑定(bind)将一些表单参数映射到我的模型中，但我认为在映射嵌入式集合方面可能存在一些限制。例如，如果我提交一些这样的参数，那么映射工作正常: //this wo
Django模板timesince过滤器-限制
是否可以将 django 自过滤器起的时间限制为 7 天。如果日期超过 7 天，则不应用过滤器最佳答案 timesince 的源代码位于 django/django/utils/timesince.
Paypal 限制
我想在我的网站上嵌入一个 PayPal 捐赠按钮。但问题是我住在伊朗——这个国家受到制裁，人们不使用国际银行账户或主要信用卡。有什么想法吗？请帮忙! 问候沮丧最佳答案您可以在伊朗境内使用为伊朗
MySQL联合+限制
这是我的查询 select PhoneNumber as _data,PhoneType as _type from contact_phonenumbers where ContactID = 3
mongodb $in 限制
这个问题在这里已经有了答案: What is the maximum number of parameters passed to $in query in MongoDB? (4 个答案) 关闭
AndroidManifest 限制
我的一个项目的 AndroidManifest.xml 变得越来越大(> 1000 行)，因为我必须对某些文件类型使用react并且涵盖所有情况变得越来越复杂。我想知道 list 大小是否有任何限制。
MySQL 限制
在使用 Sybase、Infomix、DB2 等其他数据库产品多年后使用 MySQL 5.1 Enterprise 时；我遇到了 MySQL 不会做的事情。例如，它只能为 SELECT 查询生成 EX
mongodb $in 限制
这个问题在这里已经有了答案: What is the maximum number of parameters passed to $in query in MongoDB? (4 个回答) 关闭5年
限制 Apache日志文件大小的方法
通常我们是在{$apache}/conf/httpd.conf中设置Apache的参数，然而我们并没有发现可以设置日志文件大小的配置指令，通过参考http://httpd.apache.org/do
Android SharedPreferences 限制
我正在搜索最大的 Android SharedPreferences 键值对，但找不到任何好的答案。其次，我想问一下，如果我有一个键，它的字符串值限制是多少。多少字符可以放入其中。如果我需要频繁更改值
Soundcloud API 限制。
我目前正在试验 SoundCloud API，并注意到我对/tracks 资源的 GET 请求一次从不返回超过 200 个结果。关于这个的几个问题: 这个限制是故意的吗？有没有办法增加这个限制？如
Firebase TLS 限制
我正在与一家名为 Dwolla 的金融技术公司合作，该公司提供了一个 API，用于将银行信息附加到用户并收取/发送 ACH 付款。他们需要我将我的 TLS 最低版本升级到 1.2(禁用 TLS 1.
php - 根据重复元素的数量对PHP中的多维关联数组进行排序/限制
我在 PHP 中有一个多维数组，如下所示: $array = Array ( [0] => Array ( [bill] => 1 ) [1] => Array ( [
连接的 SQL 限制
我在获取下一个查询的第一行时遇到了问题: Select mar.Title MarketTitle, ololo.NUMBER, ololo.Title from Markets mar JOIN(

首页

博学

6Ren·AI

商城

javascript - 如何限制动态复选框