javascript限制所选择复选框的个数

最新推荐文章于 2020-12-19 11:01:22 发布
最新推荐文章于 2020-12-19 11:01:22 发布
阅读量1.1k 收藏
点赞数
分类专栏： JavaScript_实例 文章标签： javascript JavaScript Javascript javaScript 限制复选框的个数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baiding1123/article/details/8393890
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript限制所选择复选框的个数</title>
</head>

<body>
<form id="form1" name="form1" method="post" action=""style="margin-top:150px;">
  <table width="230" height="109" border="0" align="center" style="font-family:Georgia, 'Times New Roman', Times, serif; font-weight:bold; color:#F60;" >
    <tr>
      <td width="48" height="33"><input type="checkbox" name="one" id="one" onClick="countChoices(this)" /><!--点击监听，用countChoices()计数-->
        1
          <label for="one"></label></td>
      <td width="59"><input type="checkbox" name="two" id="two" onClick="countChoices(this)" />
        2</td>
      <td width="51"><input type="checkbox" name="three" id="three" onClick="countChoices(this)"/>
        3</td>
      <td width="54"><input type="checkbox" name="four" id="four" onClick="countChoices(this)"/>
        4</td>
    </tr>
    <tr>
      <td height="34"><input type="checkbox" name="five" id="five" onClick="countChoices(this)"/>
        5</td>
      <td><input type="checkbox" name="six" id="six" onClick="countChoices(this)"/>
        6</td>
      <td><input type="checkbox" name="seven" id="seven" onClick="countChoices(this)"/>
        7</td>
      <td><input type="checkbox" name="eight" id="eight" onClick="countChoices(this)"/>
        8</td>
    </tr>
    <tr>
      <td height="34"><input type="checkbox" name="nine" id="nine" onClick="countChoices(this)" />
        9</td>
      <td><input type="checkbox" name="ten" id="ten" onClick="countChoices(this)"/>
        10</td>
      <td colspan="2" style="font-family:'宋体'; font-size:12px; color:#F60;">最多选4个!</td>
    </tr>
  </table>
</form>
</body>
<SCRIPT LANGUAGE="JavaScript">
function countChoices(obj) {
max = 4;/*设置最多选择的个数*/
one = obj.form.one.checked;
two = obj.form.two.checked;
three = obj.form.three.checked;
four = obj.form.four.checked;
five = obj.form.five.checked;
six = obj.form.six.checked;
seven = obj.form.seven.checked;
eight = obj.form.eight.checked;
nine = obj.form.nine.checked;
ten = obj.form.ten.checked;
count = (one ? 1 : 0) + (two ? 1 : 0) + (three ? 1 : 0)+ (four ? 1 : 0)+ (five ? 1 : 0)+ (six ? 1 : 0)+ (seven ? 1 : 0)+ (eight ? 1 : 0)+ (nine ? 1 : 0)+ (ten ? 1 : 0);/*累加，每选一个就累加一个数*/
if (count > max) {/* 判断是否大于max*/
alert("对不起，你最多只能选择" + max + "个项目!");
obj.checked = false;
   }
}
//-->
</script>
</html>
效果图：

baiding1123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript限制复选框最多选中几项
啊哈前端的专栏
01-05 946
限制复选框最多选几项 最多选中 1 2 3 4 5 6 项 var maxnum=1,num= 0,checkboxs=document.getElementsByName("checkmost"),al
js 控制多选框选择项数
weixin_45773503的博客
01-28 576
应用场景： 当我们限制多选框选择数量时用到 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <b
js限制checkbox选中个数以限制六个为例
asbgfhrty的专栏
07-16 617
今天在做项目时，碰到一个问题，我需要展示多个checkbox复选框，而只能允许最多选6个。调试了老半天，终于出来了，代码如下： www.usus.cc   var c=0,limit=6;  function doCheck(obj) {  obj.checked?c++:c--;  if(c>limit){  obj.checked=false;  alert("over"); 
js实现复选框的多选，全选，反选
qq_507653349的博客
11-13 527
多选，全选，反选js实现复选框的多选，全选，反选 js实现复选框的多选，全选，反选 &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;&lt;input type="checkbox" name="chkAllResourceType" id="chkAllResourceType" onclick="sel
JS在页面限制checkbox最大复选数
Alex Tam 的专栏
07-16 1754
应该是挺简单的代码, 记录以下, 方便以后看看. 首先最直接的想法就是使用循环, 用局部变量记录已选的checkbox, 达到最大值就将余下的checkbox都禁止选择, 如下: JS限制checkbox复选框多选 function onCheckBox(checkbox) { var items = document.getElementsByName("item");
前端随手记-js监测checkbox已选中个数并且限制最多选几个
joey_ro的博客
09-22 717
1.前端界面 选中几个checkbox就在下方显示； 记录选中的checkbox个数当达到最大值时，不能在选择checkbox。 <tr> <td><%=carriage%></td> <td><%=location%></td> <td><input type="checkbox" value="" name="c
jquery统计用户选中的复选框的个数
10-25
当这些复选框与jQuery结合时，我们可以通过JavaScript来动态控制和管理这些元素。 在上述的代码示例中，首先展示了基本的HTML结构，其中包含多个带有相同名称（name="check"）的复选框，每个复选框都有一个对应的值...
使用php验证复选框有效性的示例
10-26
在实际开发中，根据项目需求，可能需要扩展验证逻辑，包括但不限于：检查复选框的个数、验证复选框的值是否存在于预定义的列表中，以及确保用户至少选择一个选项等。了解如何正确地验证复选框的数据对于构建健壮的...
jquery统计复选框选中示例
12-09
首先，让我们回顾一下纯JavaScript实现复选框选中个数统计的代码。在提供的描述中，我们看到一个简单的HTML结构，其中包含三个复选框（每个都有`name="check"`），以及一个按钮（`id="btn"`）。当用户点击按钮时，...
动态获取复选框checkbox选中个数的jquery代码[总结].pdf
10-12
本文将深入探讨如何使用jQuery来动态获取复选框选中的个数。 jQuery 是一个强大的JavaScript库，它提供了简洁的API来操作DOM（文档对象模型），包括对表单元素如复选框的操作。在给定的例子中，开发者尝试通过绑定...
html Checkbox 多选用jquery限制最多可选数
weixin_30511039的博客
03-26 282
amx 和new Array(1) 根据自己的需要定，以下是代码： <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> var max = 2; //最多的可选...
jstree的checkbox实例+详解
mymy1026的博客
12-18 872
jstree的checkbox实例较少，思索后决定进行一下整理，先上代码 $("#filtrate_row").on("loaded.jstree",function(event, data){ tree_dom = data; }).on("ready.jstree",function(event, data){ ...
web前端左右选择框移动，及查询
Jerome的博客
07-24 2533
“不要重复造轮子 Stop Trying to Reinvent the Wheel”， 可能是每个程序员入行被告知的第一条准则。在前人的基础上进行了改进
jstree中复选框的使用
fengxx17805988617的博客
04-16 1941
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 jstree...
layui复选框限制选择个数
aawuwuwuxx的博客
12-05 4227
复选框限制选择个数 html &lt;div class="layui-form-item"&gt; &lt;label class="layui-form-label"&gt;xxx&lt;/label&gt; &lt;div class="layui-input-block"&gt; &lt;input class="edu
前端简单入门第十五讲 使用JavaScript控制下拉列表的左右选择
李阿昀的博客
01-05 532
在我们的分类管理页面中，我们要能够去修改我们的分类信息。当我们一点修改的时候，跳转到一个可以编辑的页面，这里面能够修改分类的名称、分类的描述、以及分类的商品。在修改分类商品时，可以使用JavaScript来控制下拉列表的左右选择，效果类似如下： 案例代码实现 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="...
js 根据条件禁止复选框_JS在页面限制checkbox最大复选数
weixin_39994296的博客
12-19 860
应该是挺简单的代码, 记录一下分享.首先最直接的想法就是使用循环, 用局部变量记录已选的checkbox, 达到最大值就将余下的checkbox都禁止选择, 例如以下:JS限制checkbox复选框多选function onCheckBox(checkbox){var items = document.getElementsByName("item");var maxChoices = 3;var...
JavaScript中用按钮控制复选框选中
最新发布
03-31
可以使用addEventListener()方法监听按钮的点击事件，然后在事件处理程序中使用checked属性来控制复选框的选中状态。示例代码如下： HTML： ``` <input type="checkbox" id="checkbox">复选框 <button id="checkboxBtn">点击选中复选框</button> ``` JavaScript： ``` var checkbox = document.getElementById('checkbox'); var checkboxBtn = document.getElementById('checkboxBtn'); checkboxBtn.addEventListener('click', function() { checkbox.checked = true; }); ``` 在上面的代码中，我们获取了复选框和按钮的DOM元素，并使用addEventListener()方法监听了按钮的点击事件。当按钮被点击时，事件处理程序会将复选框的checked属性设置为true，从而选中复选框。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值