<!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/java script"></script> </head> <body> <script type="text/java script"> $(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/java script"> $(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,塗聚文