• jquery checkbox相关 prop方法


    jquery checkbox相关 prop方法

    firefox中 checkbox属性checked="checked"已有,但复选框却不显示打钩的原因
    复选框绑定了click事件,点一次选中,再点击取消选中,依次类推。
    这个功能在ie中没问题,但是在firefox中测试的时候,前两次都没有问题,可以正常显示选中和取消,但当再去选中的时候,复选框的属性checkbox值变为"checked",没问题,但是复选框却不在显示选中状态,明明属性值改了,但是却不显示勾选。

    正解:后来经偶像指点,原来是jQuery版本问题。我操作属性用的是
    $("**").attr("attrName");而jQuery的版本用的是1.9,这就是存在一个兼容性和稳定性问题。
    jQuery API明确说明,1.6+的jQuery要用prop,尤其是checkBox的checked的属性的判断,即:
    $("input[type='checkbox']").prop("checked");
    $("input[type='checkbox']").prop("disabled", false);
    $("input[type='checkbox']").prop("checked", true);
    在使用是将attr改为prop,问题得解。

    -------------------------------------------
    //个性化,美化checkbox多选框、单选框
    $('input[type="checkbox"]').wrap('<div class="check-box"><i></i></div>');
    $.fn.toggleCheckbox = function () {
    this.attr('checked', !this.attr('checked'));
    }
    $('.check-box').on('click', function () {
    $(this).find(':checkbox').toggleCheckbox();
    $(this).toggleClass('checkedBox');
    });
    $('input[type="radio"]').wrap('<div class="radio-btn"><i></i></div>');
    $(".radio-btn").eq(0).addClass("checkedRadio")
    $(".radio-btn").on('click', function () {
    var _this = $(this),
    block = _this.parent().parent();
    block.find('input:radio').attr('checked', false);
    block.find(".radio-btn").removeClass('checkedRadio');
    _this.addClass('checkedRadio');
    _this.find('input:radio').attr('checked', true);
    });

    用js操作的需要加上 $(this).parent().parent().toggleClass('checkedBox'); 公共方法里面只处理了onclick事件,用代码控制的不另外处理样式不会跟着变动的。
    公共方法在原来input上面增加了两层 <div class="radio-btn"><i></i></div>
    页面处理click事件也要用外层的.check-box样式,不能直接用input里面的样式作为控制(给覆盖了点击不到)
    实例:
    $(function(){
    $('.check-box').click(function(){
    var input = $(this).children("i").children("input");
    var brand = input.val();
    var band ="input[serie = '" +brand + "']";

    if( input.attr("checked") == 'checked'){
    $(band).each(function(){
    $(this).checked = true;
    $(this).parent().parent().toggleClass('checkedBox');
    });
    }else{
    $(band).each(function(){
    $(this).checked = false;
    $(this).parent().parent().toggleClass('checkedBox');
    });
    }
    });
    });

    ----------------------------------------

  • 相关阅读:
    【硬件】组装一台多核电脑
    【硬件】组装电脑前的准备工作
    【长知识】设计多核电脑装机方案
    【长知识】认识电脑的硬件组成
    程序员必备基础:如何安全传输存储用户密码?
    二本应届生的大学生活、2020年总结(已上岸百度)
    白日梦的Elasticsearch系列笔记(一)基础篇-- 快手上手ES
    全网最牛X的!!! MySQL两阶段提交串讲
    删库后!除了跑路还能干什么?
    数据库面试简答、30道高频面试题
  • 原文地址:https://www.cnblogs.com/zdz8207/p/5515287.html
Copyright © 2020-2023  润新知