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

jQuery事件绑定与Checkbox操作

最新推荐文章于 2022-10-29 21:13:49 发布

原创最新推荐文章于 2022-10-29 21:13:49 发布 · 6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #checkbox

JavaScript/jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用jQuery为动态添加的元素绑定事件，并详细解释了两种不同方法（live()和on()）的区别及应用。此外，还展示了如何利用prop()方法来检查和设置checkbox的状态。

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

$(function() {
	$('.btn').on('click', function() {
		alert('按钮被点击');
	});
	$('body').append('<button class="btn">动态添加的按钮</button>');
});

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

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

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

使用方法：

<input type="checkbox" id="selectAll" />全选
<input type="checkbox" class="selectRow" />第一行
<input type="checkbox" class="selectRow" />第二行

$('#selectAll').on('click', function() {
	if ($(this).prop('checked')) {
		$('.selectRow').prop('checked', true);
	} else {
		$('.selectRow').prop('checked', false);	
	}
});