js进阶 9-15 多选框如何限制选中数目
js进阶 9-15 多选框如何限制选中数目
一、总结
一句话总结：
1、多选框如何限制选中数目？
没点击选择一次，来统计现在总共选了多少个，如果超出，就给onclick事件返回false，取消onclick事件
2、如何取消已经点击的click事件？
给onclick中返回一个false，onclick="return check()"
3、多选框最常用的属性是什么？
checked
二、js进阶 9-15 多选框限制选中数目
1、案例说明：
多选框限制选中数目
2、相关知识：单选和复选框
通常使用input元素来创建单选和复选框，的属性和方法相同，两者属性和方法相同，具有input元素共有的其他属性和方法。
属性
- 属性：id/form/name/type/disabled.......
- Checked 设置或返回 checkbox 是否应被选中
- defaultChecked 返回 checked 属性的默认值。
方法
- click() 模拟在 checkbox 中的一次鼠标点击。
- blur()、focus()
3、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
</head>
<body>
<form action="#" name="myform">
<input type="radio" name="rad" value="A">A
<input type="radio" name="rad" value="B">B
<input type="radio" name="rad" value="C">C
<input type="button" value="按钮" onclick="myform.rad[0].click()">
</form>
<form action="#" name="myform2">
<input type="checkbox" name="boxc" value="A" onclick="return check()">A
<input type="checkbox" name="boxc" value="B" onclick="return check()">B
<input type="checkbox" name="boxc" value="C" onclick="return check()">C
<input type="checkbox" name="boxc" value="D" onclick="return check()">D
</form>
<script>
//alert(myform.rad.length)
//alert(myform.rad[1].value)
//myform.rad[1].defaultChecked=true
//myform.rad[0].click() function check(){
var num=0;
var len=document.myform2.boxc.length;
for(var i=0;i<len;i++){
if(document.myform2.boxc[i].checked){
num++
}
}
if(num>2){
// document.myform2.boxc[num-1].checked=false;
alert('最多只能选择三项')
return false ;
} }
</script> </body>
</html>
js进阶 9-15 多选框如何限制选中数目的更多相关文章
- 折腾一天，获取下列多选框的所有选中值，原生js可直接通过obj.val()来获取，可jq不行，要通过循环取值来获取;
折腾一天,获取下列多选框的所有选中值,原生js可直接通过obj.val()来获取,可jq不行,要通过循环取值来获取;
- js进阶正则表达式15验证身份证号（|符号的使用：var reg=/^\d{17}[\d|X]$|^\d{15}$/）（str的方法substr）
js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr) 一.总结 1.|符号的使用:var reg=/^\d ...
- checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中
checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...
- 判断easyUI tree 节点复选框是否被选中的方法。将选中的节点高亮显示的方法
在datagrid tree中如何判断某个节点的复选框是否被选中? 我们可以通过HTML结构去分析: 1.节点未选中前 2.节点选中后 所以节点被选中前和选中后,html中的class类是用区分的. ...
- php数组转换字符串及复选框如何勾选中
php数组转换字符串及复选框如何勾选中,应用到函数 implode explode 复选框被选中后如何保存数据,表单提交过来为数组,要转换字符串 用到函数implode if(!empty($_PO ...
- jquery关于checkbox复选框是否被选中的问题
本人在项目中需要用到,判断哪些复选框被用户选中.自然而然想到用 if($('').attr('checked') == true) 但是不管有没有选,$('').attr('checked')返回的都 ...
- 用js判断一个复选框是否被选中
<html> <head> <title> 复选框全选.全不选.反选.必选一个 </title> ...
- Dtree 添加 checkbox 复选框 可以默认选中
一:目标 要实现用一个树形结构的展示数据,每个节点(除了根节点)前有一个checkbox,同时,点击父节点,则子节点全选或者全不选,当选中了全部子节点,父节点选中:如下图所示: 同时可以在创建的时候, ...
- jquery单选框 复选框表格高亮 选中
单选框: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/T ...
随机推荐
- Relaxation step（Dijkstra's 最短路径算法）
翻译成中文就是"松弛",属于工程优化的范畴: Dijkstra 的单源最短路径算法,有一个重要的步奏,当访问到新的结点 u (加入到集合 S),然后遍历 u 的邻接顶点(Adj), ...
- HTML基础第十讲---排版卷标
转自:https://i.cnblogs.com/posts?categoryid=1121494 网页的排版部份也是很重要的一环,有些现成的卷标就可以让您轻易的完成缩排或是一些特殊格式的编排喔! [ ...
- socket TCP简单通讯
socket 服务器 // // main.m // socket_server // // Created by lujunjie on 2016/11/23. // Copyright © 201 ...
- Java Web学习总结（8）——使用Cookie进行会话管理
一.会话的概念 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 有状态会话:一个同学来过教室,下次再来教室,我们会知道这个同学曾 ...
- ajax获取服务器响应信息
window.onload = function(){ document.getElementById('btn').onclick = function(){ var req = new XMLHt ...
- 程序中图片透明 函数（使用SetBkColor API函数）
void DrawTransparentBitmap(HDC hdc, HBITMAP hBitmap, short xStart, short yStart, COLORREF c ...
- Testfan软件测试社区
1. http://ask.testfan.cn/article/902 Appium 服务端安装-windows2. http://ask.testfan.cn/article/1078 最新 ...
- Android小经验
转载自:http://mp.weixin.qq.com/s?__biz=MzA4MjU5NTY0NA==&mid=404388098&idx=1&sn=8bbbba7692dc ...
- CSS3实现的立体button
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【Codeforces Round #437 (Div. 2) A】Between the Offices
[链接]h在这里写链接 [题意] 在这里写题意 [题解] 在这里写题解 [错的次数] 0 [反思] 在这了写反思 [代码] #include <bits/stdc++.h> using n ...