JQuery 实现多个checkbox 只选中一个
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "viewport" content = "user-scalable=no, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>JQuery 实现多个checkbox 只选中一个</title>
<meta name="author" content="geovindu,塗聚文,Geovin Du" />
<script src="Scripts/jquery.min.js" type="text/javascript"></script> </head> <body>
<script type="text/javascript">
$(function() {
$('#common-form').find('input[type=checkbox]').bind('click', function(){
var id = $(this).attr("id");
//当前的checkbox是否选中
if(this.checked){
//除当前的checkbox其他的都不选中
$("#common-form").find('input[type=checkbox]').not(this).attr("checked", false);
//选中的checkbox数量
var selectleng = $("input[type='checkbox']:checked").length;
console.log("选中的checkbox数量"+selectleng); }
else{
//未选中的处理
console.log("未选中的处理");
}
});
})
//http://9bitstudios.github.io/flexisel/
//https://github.com/9bitStudios/flexisel/
</script> <form id="common-form">
<input name="H1" type="checkbox"/>check1
<input name="H2" type="checkbox"/>check2
<input name="H3" type="checkbox"/>check3
</form> <form id="form1" name="form1" class="form1" method="post" action="SaveReQuestTickets.aspx?Action=Add&ProjectID=23">
<input name="H1" type="checkbox" id="H1" value="1"/>check1
<input name="H2" type="checkbox" id="H2" value="2"/>check2
<input name="H3" type="checkbox" id="H3" value="3"/>check3
</form>
<script type="text/javascript">
$(function() { $("#form1").find('input[type=checkbox]').bind('click', function(){
var id = $(this).attr("id"); //当前的checkbox是否选中
if(this.checked){ //除当前的checkbox其他的都不选中
$("#form1").find('input[type=checkbox]').not(this).attr("checked", false); //选中的checkbox数量
var selectleng = $("input[type='checkbox']:checked").length;
console.log("选中的checkbox数量"+selectleng);
}
else
{ //未选中的处理
console.log("未选中的处理");
}
});
})
</script> </body> </html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "viewport" content = "user-scalable=no, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Flexisel - A responsive jQuery Carousel</title>
<meta name="author" content="geovindu,塗聚文,Geovin Du" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script> </head> <body> <h1>Flexisel</h1> <p>Flexisel will adapt responsively as the screen width gets smaller...</p> <ul id="flexiselDemo1">
<li><img src="data:images/logo-nyt.png" /></li>
<li><img src="data:images/logo-microsoft.png" /></li>
<li><img src="data:images/logo-ebay.png" /></li>
<li><img src="data:images/logo-hp.png" /></li>
<li><img src="data:images/logo-youtube.png" /></li>
</ul> <div class="clearout"></div> <p>You can also change the number of items shown depending on the screen width.</p> <ul id="flexiselDemo2">
<li><img src="data:images/logo-adidas.png" /></li>
<li><img src="data:images/logo-nike.png" /></li>
<li><img src="data:images/logo-amazon.png" /></li>
<li><img src="data:images/logo-spotify.png" /></li>
<li><img src="data:images/logo-android.png" /></li>
</ul> <div class="clearout"></div> <p>Other options include autoplay, number of items to scroll, animation speed when scrolling right and left, initial number of visible items, and more!</p> <ul id="flexiselDemo3">
<li><img src="data:images/1.jpg" /></li>
<li><img src="data:images/2.jpg" /></li>
<li><img src="data:images/3.jpg" /></li>
<li><img src="data:images/4.jpg" /></li>
</ul> <div class="clearout"></div> <p>And you can set whether you want the slider to be infinite or not.</p> <ul id="flexiselDemo4">
<li><img src="data:images/chevrolet.png" /></li>
<li><img src="data:images/ford.png" /></li>
<li><img src="data:images/aston-martin.png" /></li>
<li><img src="data:images/mini.png" /></li>
<li><img src="data:images/lamborghini.png" /></li>
<li><img src="data:images/ferrari.png" /></li>
</ul> <script type="text/javascript">
//http://9bitstudios.github.io/flexisel/
//https://github.com/9bitStudios/flexisel/ $(window).load(function() {
$("#flexiselDemo1").flexisel(); $("#flexiselDemo2").flexisel({
visibleItems: 4,
itemsToScroll: 3,
animationSpeed: 200,
infinite: true,
navigationTargetSelector: null,
autoPlay: {
enable: true,
interval: 5000,
pauseOnHover: true
},
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1,
itemsToScroll: 1
},
landscape: {
changePoint:640,
visibleItems: 2,
itemsToScroll: 2
},
tablet: {
changePoint:768,
visibleItems: 3,
itemsToScroll: 3
}
},
loaded: function(object) {
console.log('Slider loaded...');
},
before: function(object){
console.log('Before transition...');
},
after: function(object) {
console.log('After transition...');
},
resize: function(object){
console.log('After resize...');
}
}); $("#flexiselDemo3").flexisel({
visibleItems: 5, //显示多少个图片
itemsToScroll: 1,
animationSpeed: 400,
infinite: true,
navigationTargetSelector: null,
autoPlay: {
enable: true,
interval: 5000,
pauseOnHover: true
},
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1,
itemsToScroll: 1
},
landscape: {
changePoint:640,
visibleItems: 2,
itemsToScroll: 2
},
tablet: {
changePoint:768,
visibleItems: 3,
itemsToScroll: 3
}
} }); $("#flexiselDemo4").flexisel({
infinite: false
}); });
</script> </body>
</html>
JQuery 实现多个checkbox 只选中一个的更多相关文章
- JQuery 多个checkbox 只选中一个
<form id="common-form"> <input name="check1" type="checkbox"/ ...
- Jquery实现页面上所有的checkbox只能选中一个
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jquery 多选框 checkbox 获取选中的框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery中如何判断checkbox是否选中
jquery代码: <script> $(document).ready(function() { $('#checkbox-id').click(function() { if($('# ...
- （转）jquery serialize表单序列化，当radio或checkbox 未选中时，没有序列化到对象中的原因分析和解决方案 - ghostsf
相信很多人都用过jq的表单序列化serialize()方法,因为这能很方便地帮你把表单里所有的非禁用输入控件序列化为 key/value 对象,不需要你再去一个个地拼接参数了. 这是一个很好用的函数, ...
- js中对radio和checkbox是否选中的判断
一.js判断checkbox 例如:<div class="checkbox" style="width: 150px;"> <label&g ...
- ----------jqery和js如何判断checkbox是否选中 --------两个单选按钮如何选一个，且用jquery获取被选的值
jqery和js如何判断checkbox是否选中 jquery: <div id="divId" class="divTable"> <div ...
- [转]jquery如何判断checkbox（复选框）是否被选中,至少被选中一个
谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...
- jquery 实现只能选中一个checkbox，选中当前的去除上一个
jq 实现只能选中一个checkbox,选中当前的去除上一个. <div id="checkboxed"> <input name="check1&qu ...
随机推荐
- JVM内运行时数据区
JVM的基本区域: 类加载子系统 运行时数据区(内存区域) 执行引擎 运行时数据区域 方法区(Method Area) 类的所有字和方法字节码,以及一些特殊方法如构造函数,接口代码也在这里定义.简单来 ...
- 洛谷 题解 P2117 【小Z的矩阵】
这题这么无聊,亏我还用了读入输出优化... 关键在于,这还是道黄题QWQ 掀桌而起 (╯‵□′)╯︵┻━┻ 显而易见,在i != j的情况下,a[i][j] + a[j][i]和a[j][i] + a ...
- Centos7.2 下DNS+NamedManager高可用部署方案完整记录
Centos7.2 下DNS+NamedManager高可用部署方案完整记录 之前说到了NamedManager单机版的配置,下面说下DNS+NamedManager双机高可用的配置方案: 1)机器环 ...
- unity3d 柏林噪声 PerlinNoise 规律 算法
测试 每个小数值取100次 print(0.1); LaTest3(0.1f, 0.1f); print("Max:" + La.Max() + "|Min:" ...
- 使用iCamera 白平衡调试小结 CC1603@AR0134
使用iCamera 白平衡调试小结 CC1603@AR0134 iCamera有强大的各种摄像头调试功能 之前演示过的有:曝光.增益.各种寄存器测试.RAW.yuv输出 今天测试下白平衡功能 绝大多数 ...
- JPEG算法解密
图片压缩有多重要,可能很多人可能并没有一个直观上的认识,举个例子,一张800X800大小的普通图片,如果未经压缩,大概在1.7MB左右,这个体积如果存放文本文件的话足够保存一部92万字的鸿篇巨著< ...
- win10 修改用户目录为英文
win10家庭版怎样进入 administratornet user administrator /active:yes net user administrator /active:no
- MYSQL-JDBC批量新增-更新-删除
目录 1 概述 2 开启MYSQL服务端日志 3 深入MYSQL/JDBC批量插入 3.1 从一个例子出发 3.2 JDBC的批量插入操作 3.3 两个常被忽略的问题 3.5 误区 4 MYSQL/J ...
- Spring boot采坑记--- 在启动时RequstMappingHandlerMapping无法找到部分contorller类文件的解决方案
最近有一个心得需求,需要在一个现有的springboot项目中增加一些新的功能,于是就在controller文件包下面创建新的包和类文件,但是后端开发完之后,本地测试发现前端访问报404错误,第一反应 ...
- BBS项目文件
bbs项目文件 # 创建好文件后 git init git remote add origin git@gitee.com:lddragon/bbs3.git git remote git pull ...