怎样让选中的label 改变颜色？

怎样让选中的label 改变颜色？

今天遇到这样一个问题 要求一个label 组件 其中的input选中的时候 label 里面的颜色是蓝色

代码

< div  id ="sld" >
< p >< label >< input   name =""  type ="checkbox"  value =""   />  飞机 </ label ></ p >
< p >< label >< input   name =""  type ="checkbox"  value =""   />  飞机 </ label ></ p >
< p >< label >< input   name =""  type ="checkbox"  value =""   />  飞机 </ label ></ p >
< p >< label >< input   name =""  type ="checkbox"  value =""   />  飞机 </ label ></ p >
</ div >

开始是想通过 控制 label底下的input 的 checked属性 为"checked" 或者 ""，并且 给当前label toggleClass

结果却不行~~

最后发现原来如果 input 具有 checked="" 属性时 就默认是选中了  ，那么取消选中的操作 应该是 removeAttr("checked")才对

最终写成了：

 

 

$( " #sld label " ).click( function (){
                                 if ($( this ).find( " input " ).attr( " checked " )){
                                    $( this ).find( " input " ).removeAttr( " checked " );
                                } else {
                                    $( this ).find( " input " ).attr( " checked " , " checked " );
                                }
                                
                                $( this ).toggleClass( " chd " );
                                 return   false ;
                            })

问题解决

 PS:

最终解决方法：

 $("#sld label input").click(function(){
                  $(this).parents("label").toggleClass("chd");
    })

 虽然IE6下不相应LABLE 的点击 （只能用for了）但是IE6 这种垃圾浏览器实在懒得管了 由它去吧~~

 虽然第一个方法没有用到，但是还是得知了 取消选中的方法。

 

转载于:https://www.cnblogs.com/trance/archive/2010/03/23/1692601.html