注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

~~

~~

 
 
 

日志

 
 

关于 jquery 冒泡事件  

2016-06-15 10:58:03|  分类: jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<table class="table">
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
    </tr>
    <tr>
        <td><input class="A" type="checkbox" value="" /></td>
        <td><input class="B" type="checkbox" value="" /></td>
        <td><input class="C" type="checkbox" value="" /></td>
        <td><input class="D" type="checkbox" value="" /></td>
        <td><input class="E" type="checkbox" value="" /></td>
    </tr>
</table>

目的:
在点击td任何地方的时候,checkbox都设置成被选中或取消的状态

但是在点击td选中或者取消checkbox时,如果点击checkbox操作的时候会和td选中 取消冲突,造成checkbox不能选,

js如下:


$(".table").on("click", "tr td", function(){
    var checkbox  = $(this).find("input[type='checkbox']");
    var isChecked = checkbox.is(":checked");
    
    // 
    if (isChecked) {
        checkbox.removeAttr("checked");
    } else {
        checkbox.attr("checked","true");
    }
})

怎么才能在td之前 检查点击的是不是checkbox呢?


解决方案:

$(".table").on("click", "tbody tr td", function(e){
var checkbox = $(this).find("input[type='checkbox']");
var isChecked = checkbox.is(":checked");

if(e.target.tagName == 'INPUT') {
return;
}
if (isChecked) {
checkbox.removeAttr("checked");
} else {
checkbox.prop("checked","true");
}

});

需要注意的是 attr 和 prop(1.6开始才有的):


1、赋值时
<input type="checkbox" checked />
prop,即:$('input').prop('checked',true); false表示取消:$('input').prop('checked',false);
attr:$('input').attr('checked','true'); 取消$('input').removeAttr('checked');

2、取值时
<input  id="input1" type="checkbox" checked>
<input  id="input2" type="checkbox">
推荐prop,即:
$('#input1').prop('checked'); //返回true
$('#input2').prop('checked'); //返回false
而使用attr,则:
$('#input1').attr('checked'); //返回checked
$('#input2').attr('checked'); //返回undefined

3、特殊属性赋值、取值
在input中追加一个data-tips属性。 <input type="text" value="" data-tips="aa">
只能写:$('input').attr('data-tips','aa');
使用prop是不管用的。
取值时,两个都可以的:
$('input').attr('data-tips');
$('input').prop('data-tips');


attr和prop参考于:http://lemmychrist.blog.163.com/blog/static/98732963201391485225489/ 

  评论这张
 
阅读(45)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018