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 ...
随机推荐
- 17-Python执行JS代码--PyExecJS、PyV8、Js2Py
一.Python执行JS代码--PyExecJS.PyV8.Js2Py 1.1.PyExecJS PyExecJS的优点是您不需要照顾JavaScript环境.特别是,它可以在Windows环境中运行 ...
- CF579 - A Raisinng bacteria
You are a lover of bacteria. You want to raise some bacteria in a box. Initially, the box is empty. ...
- 一份详细的 Matplotlib入门指导
hMatplotlib是最受欢迎的二维图形库,但有时我们很难做到得心应手的去使用. 如何更改图例上的标签名称? 如何设置刻度线? 如何将比例更改为对数? 如何在我的情节中添加注释和箭头? 如何在我的图 ...
- python 金融应用（三）数据可视化
matplotlib 库( http://www.matp1otlìb.org )的基本可视化功能. 主要是2-D绘图.金融绘图和3-D绘图 一.2-D绘图 1.1一维数据集 #导入所需要的包impo ...
- SpringBoot系列之Spring Data Jpa集成教程
SpringBoot系列之Spring Data Jpa集成教程 Spring Data Jpa是属于Spring Data的一个子项目,Spring data项目是一款集成了很多数据操作的项目,其下 ...
- windows程序设计01_utf8编码问题
坚持与妥协 从学程序的第一天老师就给我们说源代码应该使用utf8保存.因为先入为主,"源代码应该使用utf8"的观念已经在"学院派"出身的程序员脑子里根深蒂固. ...
- 笔记||Python3之布尔表达式+条件判断
布尔表达式: 布尔类型:特性:只有两种情况 --- 真 / 假 1 -- True False 2 -- type(True) ------------ <class ...
- java之单例设计模式
什么是设计模式? 设计模式是在大量的实践中总结和理论化之后优选的代码结构.编程风格.以及解决问题的思考方式.设计模式就像是经典的棋谱,不同的棋局,我们用不同的棋谱,免去我们自己再思考和探索. 所谓单例 ...
- 【Flutter】348- 写给前端工程师的 Flutter 教程
点击上方"前端自习课"关注,学习起来~ | 导语 最爱折腾的就是前端工程师了,从 jQuery 折腾到 AngularJs,再折腾到 Vue.React.最爱跨屏的也是前端工程师, ...
- 【JS】310- 使用 focusout 事件，解决 iOS 键盘收起不归位问题
点击上方"前端自习课"关注,学习起来~ ,0); } }, 这时,我们问题得到解决了,当从输入框输入内容,然后点击键盘的完成收起键盘,效果符合我 ...