-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
从安
2019-06-25
来源 ：
阅读 1624
评论 0
摘要：本篇文章主要讲述jQuery 之详授多个checkbox 只选中一个教程，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。
本篇文章主要讲述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("未选中的处理");
}
});
})
////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" 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="//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="images/logo-nyt.png" /></li>
<li><img src="images/logo-microsoft.png" /></li>
<li><img src="images/logo-ebay.png" /></li>
<li><img src="images/logo-hp.png" /></li>
<li><img src="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="images/logo-adidas.png" /></li>
<li><img src="images/logo-nike.png" /></li>
<li><img src="images/logo-amazon.png" /></li>
<li><img src="images/logo-spotify.png" /></li>
<li><img src="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="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="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="images/chevrolet.png" /></li>
<li><img src="images/ford.png" /></li>
<li><img src="images/aston-martin.png" /></li>
<li><img src="images/mini.png" /></li>
<li><img src="images/lamborghini.png" /></li>
<li><img src="images/ferrari.png" /></li>
</ul>
<script type="text/javascript">
////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>
本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
