您好,欢迎来到车荣汽车网。
搜索
您的当前位置:首页jQuery操作CheckBox的方法实例详解

jQuery操作CheckBox的方法实例详解

来源:车荣汽车网


在我们是实际开发发过程中,不管是html还是jQuery都是我们必须要学的知识之一,CheckBox相信大家都不陌生、html中jQuery中都会使用到他,那么我们今天就带大家详细介绍关于jQuery操作CheckBox的方法实例!

jQuery操作CheckBox的方法实例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
 <HEAD> 
 <TITLE> New document.nbsp;</TITLE> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 <SCRIPT LANGUAGE="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script> 
 <SCRIPT LANGUAGE="javascript"> 
 <!-- 
 $("document.quot;).ready(function(){ 
 
 $("#btn1").click(function(){ 
 
 $("[name='checkbox']").attr("checked",'true');//全选 
 
 }) 
 $("#btn2").click(function(){ 
 
 $("[name='checkbox']").removeAttr("checked");//取消全选 
 
 }) 
 $("#btn3").click(function(){ 
 
 $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 
 
 }) 
 $("#btn4").click(function(){ 
 
 $("[name='checkbox']").each(function(){ 
 
 
 if($(this).attr("checked")) 
 { 
 $(this).removeAttr("checked"); 
 
 } 
 else 
 { 
 $(this).attr("checked",'true'); 
 
 } 
 
 }) 
 
 }) 
 $("#btn5").click(function(){ 
 var str=""; 
 $("[name='checkbox'][checked]").each(function(){ 
 str+=$(this).val()+""r"n"; 
 //alert($(this).val()); 
 }) 
 alert(str); 
 }) 
 }) 
 //--> 
 </SCRIPT> 
 
 </HEAD> 
 
 <BODY> 
 <form name="form1" method="post" action=""> 
 <input type="button" id="btn1" value="全选"> 
 <input type="button" id="btn2" value="取消全选"> 
 <input type="button" id="btn3" value="选中所有奇数"> 
 <input type="button" id="btn4" value="反选"> 
 <input type="button" id="btn5" value="获得选中的所有值"> 
 <br> 
 <input type="checkbox" name="checkbox" value="checkbox1"> 
 checkbox1 
 <input type="checkbox" name="checkbox" value="checkbox2"> 
 checkbox2 
 <input type="checkbox" name="checkbox" value="checkbox3"> 
 checkbox3 
 <input type="checkbox" name="checkbox" value="checkbox4"> 
 checkbox4 
 <input type="checkbox" name="checkbox" value="checkbox5"> 
 checkbox5 
 <input type="checkbox" name="checkbox" value="checkbox6"> 
 checkbox6 
 <input type="checkbox" name="checkbox" value="checkbox7"> 
 checkbox7 
 <input type="checkbox" name="checkbox" value="checkbox8"> 
 checkbox8 
 </form>

总结:

本文是通过实例给大家介绍了jQuery操作CheckBox的方法实例、详细小伙伴们对此也是有了一定的了解,希望对你工作有所帮助!

Copyright © 2019- carofchina.com.cn 版权所有

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务