首页 > 代码库 > jQuery1.9为动态添加元素绑定事件以及获取和操作checkbox的选择属性

jQuery1.9为动态添加元素绑定事件以及获取和操作checkbox的选择属性

1.jQuery为动态添加的元素绑定事件:在1.7之后,添加了live()方法,1.9后又被移除,1.9中可用on()方法:

 

[javascript] view plain copy
 
 技术分享技术分享
  1. $(function() {  
  2.     $(‘.btn‘).on(‘click‘, function() {  
  3.         alert(‘按钮被点击‘);  
  4.     });  
  5.     $(‘body‘).append(‘<button class="btn">动态添加的按钮</button>‘);  
  6. });  


2.获取checkbox是否被选中,以及操作其选中状态:

 

a.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase .

b.如果使用attr方法获取时,如果当前input中初始化未定义checked属性,则不管当前是否选中,$("#selectAll").attr("checked")都会返回undefined; 
    如果当前input中初始化已定义checked属性,则不管是否选中,$("#selectAll").attr("checked")都会返回checked

使用方法:

 

[html] view plain copy
 
 技术分享技术分享
  1. <input type="checkbox" id="selectAll" />全选  
  2. <input type="checkbox" class="selectRow" />第一行  
  3. <input type="checkbox" class="selectRow" />第二行  

 

[javascript] view plain copy
 
 技术分享技术分享
    1. $(‘#selectAll‘).on(‘click‘, function() {  
    2.     if ($(this).prop(‘checked‘)) {  
    3.         $(‘.selectRow‘).prop(‘checked‘, true);  
    4.     } else {  
    5.         $(‘.selectRow‘).prop(‘checked‘, false);   
    6.     }  
    7. });

jQuery1.9为动态添加元素绑定事件以及获取和操作checkbox的选择属性