复选框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 复选框 全选都选 ...
随机推荐
- Ubuntu 下安装QT
Ubuntu 下安装QT 本文使用的环境 QT Library: qt-everywhere-opensource-src-4.7.4.tar.gz QT Creator: qt-creator-li ...
- Android开发之自定义组件和接口回调
说到自定义控件不得不提的就是接口回调,在Android开发中接口回调用的还是蛮多的.在这篇博客开始的时候呢,我想聊一下iOS的自定义控件.在iOS中自定义控件的思路是继承自UIView, 在UIVie ...
- PHP的学习--在Atom中使用XDebug(Mac)
之前写过一篇博客<PHP的学习--在sublime中使用XDebug(Ubuntu)>,讲了在Ubuntu系统 sublime 中配置 XDebug,其实配置好之后,我也很少用,原因有两点 ...
- MySql - InnoDB - 事务 , Php版
(出处:http://www.cnblogs.com/linguanh/) 1,前序 由于要重构APP(社交类) 服务端接口的部分代码,故接触到了 innoDB,以及事务这个词,下面主要是以例子的形式 ...
- 制作自己的MVC框架(一)——简单粗暴的实现
现在市面上有很多成熟的MVC框架,可以拿来直接用,但自己造一下轮子其实也挺有意思的. 下面先来看个最简单粗暴的MVC实现. 5个文件就能实现最简单的MVC,在Apache中设置一个虚拟目录,配置个简单 ...
- jvm系列(三):java GC算法 垃圾收集器
GC算法 垃圾收集器 概述 垃圾收集 Garbage Collection 通常被称为“GC”,它诞生于1960年 MIT 的 Lisp 语言,经过半个多世纪,目前已经十分成熟了. jvm 中,程序计 ...
- CentOS7使用firewalld打开关闭防火墙与端口
1.firewalld的基本使用 启动: systemctl start firewalld 查看状态: systemctl status firewalld 停止: systemctl disab ...
- Java中日期的转化
4.如何取得年月日.小时分秒? 创建java.util.Calendar实例(Calendar.getInstance()),调用其get()方法传入不同的参数即可获得参数所对应的值,如:calend ...
- Hibernate4.2.4入门(一)——环境搭建和简单例子
一.前言 发下牢骚,这段时间要做项目,又要学框架,搞得都没时间写笔记,但是觉得这知识学过还是要记录下.进入主题了 1.1.Hibernate简介 什么是Hibernate?Hibernate有什么用? ...
- 在xcode中用 swift 进行网络服务请求
xcode集成开发环境是运行于Mac苹果电脑上用于开发swift应用程序的工具,利用xcode可以很方便.直观的开发OS X和iOS系统所支持的应用程序. 1 开发环境: Mac OS 10.11 X ...