`

jQuery之checkbox(复选框)

阅读更多
业务需求:经常在用户登记中有这样的东西,只选择其中一项或者多项
页面代码
<input type="checkbox" name="love" value="0"/>电影
<input type="checkbox" name="love" value="1"/>图书
<input type="checkbox" name="love" value="2" checked/>学习
 <input type="checkbox" name="love" value="3"/>编程
 <input type="button" id="get4" value="设置多选框的值" /><br> 

jQuery中它提供了一个方法实现
$(":checkbox[name=love]").slice(1,2).attr("checked",true);

但是这个方法有局限性,它只是选取二个下标之间的元素
只有手动写了
var v = prompt('欢迎你,请输入值','');
var lv = v.split(',');
 var size = lv.length;			          
 $(':checkbox[name=love]').each(function()   
 { 
	 this.checked = false;
	  /*
	for(var i=0;i<size;i++){
		if(this.value == lv[i]){
			this.checked = true;
		}
	}*/    
	if(v.indexOf(this.value) != -1){
		this.checked = true;
	}
 });  

js原生实现
//js原生实现				
 //判断是以逗号相连			       
  var lv = v.split(',');
 var size = lv.length;
 var loves = document.getElementsByName("love");
 var leng = loves.length;
 for(var i=0;i<leng;i++){
	 //将原来设置清空
	 loves[i].checked = false;			          	  
	if(size > 0){
		 for(var j=0;j<size;j++){
		      if(loves[i].value == lv[j]){
			      loves[i].checked = true;
			          break;
			}
	          }
	}else{
		 if(loves[i].value == v){
			 loves[i].checked = true;			          	  	 		
		 }
	  } 
  }

说明以下来自于:jQuery权威指南代码:针对单个复选框的判断
<input type="checkbox" id="cr"/>

jQuery方式
 var $cr = $("#cr");  //jQuery对象
 $cr.click(function(){
	if($cr.is(":checked")){ //jQuery方式判断
		 alert("感谢你的支持!你可以继续操作!");
	  }
 })

DOM方式
var $cr = $("#cr");  //jQuery对象
var cr = $cr.get(0); //DOM对象,获取 $cr[0]
 $cr.click(function(){
	  if(cr.checked){ //DOM方式判断
		 alert("感谢你的支持!你可以继续操作!");
	  }
 })
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics