欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery之checkbox(复选框)

程序员文章站 2022-06-10 09:36:42
...
业务需求:经常在用户登记中有这样的东西,只选择其中一项或者多项
页面代码
<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);

但是这个方法有局限性,它只是选取二个下标之间的元素
只有手动写了jQuery之checkbox(复选框)
            
    
    博客分类: JqueryJavaScript jquerycheckboxjavascript 
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("感谢你的支持!你可以继续操作!");
	  }
 })