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 ...
随机推荐
- 回文自动机(PAM) 入门讲解
处理回文串,Manacher算法也是很不错,但在有些问题的处理上比较麻烦,比如求本质不同的子串的数量还需要结合后缀数组才能解决.今天的们介绍一种能够方便的解决关于回文串的问题的算法--PAM. 一些功 ...
- LightOJ1284 Lights inside 3D Grid (概率DP)
You are given a 3D grid, which has dimensions X, Y and Z. Each of the X x Y x Z cells contains a lig ...
- 【新手必学】Python爬虫之多线程实战
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:清风化煞_ 正文 新手注意:如果你学习遇到问题找不到人解答,可以点 ...
- Spring面试题总结及答案
Spring面试总结 Spring是什么? Spring框架是一个java平台,提供全面基础设施支持开发java应用程序. Spring的主要模块有哪些? Spring Code:基础模块,主要提供I ...
- tensorflow处理mnist(一)
这个文章是对google官方教程的解释 预备知识 神经网络卷积,神经网络原理 argmaxsum axis tensorflow里面有类似的函数,含义和numpy中的一样. tensorflow最基础 ...
- unity3d 随机添加树木
开放世界随机地图才是最重要的.. 随机生成树木 Terrain.terrainData //获取地形设置 terrainData.treePrototypes {get;set;} //获取或设置树木 ...
- 如何妙用Spring 数据绑定机制？
前言 在剖析完 「Spring Boot 统一数据格式是怎么实现的? 」文章之后,一直觉得有必要说明一下 Spring's Data Binding Mechanism 「Spring 数据绑定机制」 ...
- C#中关于值类型和引用类型的区别
小声哔哔 一直以来对于值类型与引用类型之间的区别都不是特别清晰,直到踩了坑.... 正好最新闲暇,便想着梳理梳理这一两年来遇到的奇葩问题和解决方案,顺便就把它给拎出来记一下,免得以后再摔跤 值类型与引 ...
- 改进一条Group By
1.先回顾下基础知识: Group By 对数据分组聚合,常常伴随having使用.having可以处理单记录,也可以小组为单位处理. 语句: SELECT colFROM table[WHERE][ ...
- 201871010119-帖佼佼《面向对象程序设计（java）》第四周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh ...