zoukankan      html  css  js  c++  java
  • 怎样让选中的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 这种垃圾浏览器实在懒得管了 由它去吧~~

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

  • 相关阅读:
    c++ 异常处理(2)
    ajax跨域,这应该是最全的解决方案了
    浏览器Request Header和Response Header的内容
    devDependencies和dependencies的区别
    json对象按时间排序
    JavaScript里的循环方法总结
    json list数据递归生成树状层级JSON
    javaScript年份下拉列表框内容为当前年份及前后50年
    vue cli+axios踩坑记录+拦截器使用,代理跨域proxy
    使用vue2+Axios+Router 之后的总结以及遇到的一些坑
  • 原文地址:https://www.cnblogs.com/trance/p/1692601.html
Copyright © 2011-2022 走看看