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 ...
随机推荐
- 为什么JDK动态代理中要求目标类实现的接口数量不能超过65535个
先明确几个概念: Class文件是一组以8字节为基础单位的二进制流 各个数据项目严格按照顺序紧凑排列在class文件中 中间没有任何分隔符,这使得class文件中存储的内容几乎是全部程序运行的程序 J ...
- Spring boot 集成 阿里 Mqtt
因为公司业务需求,需要接入 阿里Mqtt,自己基于Spring写了一个小demo,记录下来,已备以后需要. 第一步 创建一个实体bean用来装载 MqttClient private MqttClie ...
- Python 命令行之旅：使用 click 实现 git 命令
作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...
- 基于 .NET Core 的简单文件服务器
Netnr.FileServer 基于 .NET Core 的简单文件服务器,数据库为SQLite 源码 https://github.com/netnr/blog https://gitee.com ...
- Weed3 for java 新的微型ORM框架
Weed3,微型ORM框架(支持:java sql,xml sql,annotation sql:存储过程:事务:缓存:监听:等...) 05年时开发了第一代: 08年时开发了第二代,那时候进入互联网 ...
- 使用Future
/** * Runnable接口有个问题,它的方法没有返回值.如果任务需要一个返回结果,那么只能保存到变量,还要提供额外的方法读取,非常不便. * Java标准库还提供了一个Callable接口,和R ...
- Vue基础系列（五）——Vue中的指令（中）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Docker图形化工具Portainer详解
一.介绍 说明: Portainer是易于使用的软件,可为软件开发人员和IT操作人员提供直观的界面. Portainer为你提供Docker环境的详细概述,并允许你管理容器,镜像,网络和数据卷 ...
- ElasticSearch 时间格式
"datetime": { "type": "date", "format": "yyyy-MM-dd HH: ...
- 微服务分布式 spring cloud springboot 框架源码 activiti工作流 前后分离
1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...