JQuery 实现多个checkbox 只选中一个
程序员文章站
2022-05-22 13:30:57
JQuery 实现多个checkbox 只选中一个 check1 check2 check3 check1 check2 check3 ... ......
<!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="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">
//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(复选框)是否被选中以及全选、反选实现代码
-
JS/jquery实现一个网页内同时调用多个倒计时的方法
-
JQuery 实现多个checkbox 只选中一个
-
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
-
jquery 实现只能选中一个checkbox，选中当前的去除上一个
-
jQuery插件zTree实现单独选中根节点中第一个节点示例
-
jQuery实现table中两列CheckBox只能选中一个的示例
-
Angular.js实现多个checkbox只能选择一个的方法示例
-
jQuery点击tr实现checkbox选中的方法_jquery
-
jquery控制checkbox复选框选择一个,其余的不选中