复选框checkbox选中个数限制
今天遇到一个问题:就是项目里有用到限制 checkbox框选中个数,看起来很简单,但是确实花了点时间才弄清楚,废话不多说,上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
$(".tag_list_info input").click(function(){
var num=$('.tag input:checked').length;
if(num>8){
$(this).prop("checked","");
}
})
})
</script> <div class="tag clear">
<div class="list tag_list_info">
<input type="checkbox" id="tag_sort_1">
<label for="tag_sort_1">招商加盟</label>
</div>
<div class="list tag_list_info">
<input type="checkbox" id="tag_sort_2">
<label for="tag_sort_2">招商加盟</label>
</div>
<div class="list tag_list_info">
<input type="checkbox" id="tag_sort_3">
<label for="tag_sort_3">招商加盟</label>
</div>
<div class="list tag_list_info">
<input type="checkbox" id="tag_sort_4">
<label for="tag_sort_4">招商加盟</label>
</div>
<div class="list tag_list_info">
<input type="checkbox" id="tag_sort_5">
<label for="tag_sort_5">招商加盟</label>
</div>
<div class="list tag_list_info">
<input type="checkbox" id="tag_sort_6">
<label for="tag_sort_6">招商加盟</label>
</div>
<div class="list tag_list_info">
<input type="checkbox" id="tag_sort_7">
<label for="tag_sort_7">招商加盟</label>
</div>
<div class="list tag_list_info">
<input type="checkbox" id="tag_sort_8">
<label for="tag_sort_8">招商加盟</label>
</div>
<div class="list tag_list_info">
<input type="checkbox" id="tag_sort_9">
<label for="tag_sort_9">招商加盟</label>
</div>
<div class="list tag_list_info">
<input type="checkbox" id="tag_sort_10">
<label for="tag_sort_10">招商加盟</label>
</div>
<div class="list tag_list_info">
<input type="checkbox" id="tag_sort_11">
<label for="tag_sort_11">招商加盟</label>
</div>
<div class="list tag_list_info">
<input type="checkbox" id="tag_sort_12">
<label for="tag_sort_12">招商加盟</label>
</div>
</div> </body>
</html>
需要注意的是:
1.点击事件不能绑定在label上面,只能绑定在input上,若绑定在input的父元素上的话就会引发"冒泡",导致点击事件触发两次
2.获取属性的时候,有时候attr()不起作用,而换成prop()却可以,原因如下:
Attribute/Property | .attr() | .prop() |
accesskey | √ | |
align | √ | |
async | √ | √ |
autofocus | √ | √ |
checked | √ | √ |
class | √ | |
contenteditable | √ | |
draggable | √ | |
href | √ | |
id | √ | |
label | √ | |
location ( i.e. window.location ) | √ | √ |
multiple | √ | √ |
readOnly | √ | √ |
rel | √ | |
selected | √ | √ |
src | √ | |
tabindex | √ | |
title | √ | |
type | √ | |
width ( if needed over .width() ) | √ |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<script type="text/javascript">
var p_tag,inputs,selectInputs=[];
window.onload = function(){
p_tag = document.getElementById("inputsParent");
inputs = p_tag.getElementsByTagName("input");
for(var i=0; i<inputs.length; i++){
if(inputs[i].checked == true) selectInputs.push(inputs[i]);
}
}
function check_count(th){
var i=n=0;
if(th.checked == true)
{
selectInputs.push(th);
if(selectInputs.length > 2){
selectInputs[0].checked = false;
selectInputs.shift();
}
}else{
if(selectInputs.length>1){
for(var i=0; i<selectInputs.length; i++){
if(th == selectInputs[i]) selectInputs.splice(i,1);
}
}else{
th.checked = true;
return false;
}
}
}
</script>
<div id="inputsParent">
<input value="1" type="checkbox" name="chRates" onclick="check_count(this)"/><label>1</label>
<input value="2" type="checkbox" name="chRates" onclick="check_count(this)"/><label>2</label>
<input value="3" type="checkbox" name="chRates" onclick="check_count(this)" /><label>3</label>
<input value="4" type="checkbox" name="chRates" onclick="check_count(this)" /><label>4</label>
<input value="5" type="checkbox" name="chRates" onclick="check_count(this)" /><label>5</label>
<input value="6" type="checkbox" name="chRates" onclick="check_count(this)" /><label>6</label>
<input value="7" type="checkbox" name="chRates" onclick="check_count(this)" /><label>7</label>
<input value="8" type="checkbox" name="chRates" onclick="check_count(this)" /><label>8</label>
</div>
<div id="aa"></div>
</body>
</html>
复选框checkbox选中个数限制的更多相关文章
- 复选框 checkbox 选中事件
项目中用的jquery-1.11 今天需要检测一个checkbox的选中状态,想当然的用 .attr("checked") ,结果发现,无论是否选中,这个值都是 undefined ...
- js获取复选框checkbox选中的多个值
<input type="checkbox" name="idd" value="111" />a <input type ...
- php 判断复选框checkbox是否被选中
php 判断复选框checkbox是否被选中 复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考 ...
- jquery判断复选框checkbox是否被选中
jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- jQuery判断复选框checkbox的选中状态
通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...
- js获取checkbox复选框获取选中的选项
js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现 ...
- jQuery实现checkbox(复选框)选中、全选反选代码
谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
随机推荐
- 基于Caffe的Large Margin Softmax Loss的实现(上)
小喵的唠叨话:在写完上一次的博客之后,已经过去了2个月的时间,小喵在此期间,做了大量的实验工作,最终在使用的DeepID2的方法之后,取得了很不错的结果.这次呢,主要讲述一个比较新的论文中的方法,L- ...
- 纪录我的iOS学习之路
学习资料的网址 田伟宇(Casa Taloyum)有几篇介绍iOS架构的文章,一级棒!原博客链接. iOS应用架构谈 开篇 iOS应用架构谈 view层的组织和调用方案 iOS应用架构谈 网络层设计方 ...
- ElasticSearch 5学习(6)——分布式集群学习分享1
在使用中我们把文档存入ElasticSearch,但是如果能够了解ElasticSearch内部是如何存储的,将会对我们学习ElasticSearch有很清晰的认识.本文中的所使用的ElasticSe ...
- Java学习之注解Annotation实现原理
前言: 最近学习了EventBus.BufferKinfe.GreenDao.Retrofit 等优秀开源框架,它们新版本无一另外的都使用到了注解的方式,我们使用在使用的时候也尝到不少好处,基于这种想 ...
- 从零开始编写自己的C#框架(17)——Web层后端首页
后端首页是管理员登陆后进入的第一个页面,主要是显示当前登陆用户信息.在线人数.菜单树列表.相关功能按键和系统介绍.让管理员能更方便的找到息想要的内容. 根据不同系统的需要,首页会显示不同的内容,比如显 ...
- C# 复制PDF页面到另一个PDF文档
C# 复制PDF页面到另一个PDF文档 有时候我们可能有这样一个需求,那就是把PDF页面从一个PDF文档复制到另一个PDF文档中.由于PDF文档并不像word文档那样好编辑,因此复制也相对没有那么容易 ...
- MFC&Halcon之实时视频监控
上一篇实现了在MFC的窗体内显示图片,本篇介绍如何在MFC窗体内实时显示摄像头的影像. 要实现的功能是点击一个“开始”按钮,可以显示影像,再点击“停止”按钮,可以停止显示. 因为实时显示影像需要在一个 ...
- Python中的类、对象、继承
类 Python中,类的命名使用帕斯卡命名方式,即首字母大写. Python中定义类的方式如下: class 类名([父类名[,父类名[,...]]]): pass 省略父类名表示该类直接继承自obj ...
- shell脚本规划化模板
shell脚本规划化模板 Linux运维过程中,shell脚本是不可缺少的工具,但是每个运维人员编程的习惯都不一样,很多时候就是实现某个功能,写出来的脚本都是烂七八糟的.脚本必须规范化,应该从以后几个 ...
- JavaWeb_day01_HTTP_Servlet
本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! JavaWeb_day01 HTTP协议 HTTP(H ...