JS实现全选功能

JS实现全选功能

 

以下为实现全选功能的js代码，其中ready方法绑定每个checkbox的click事件，全局的监控当前每个checkbox的状态，并动态的拼接出每个被选中的checkbox的id。

 

<script language="javascript">
    $().ready(function() {
		$("input[name='id']").click(function() {
			var ids = "";
			var allChecked = true;
			
			$('input[name=id]').each(function() {
		        if (!$(this).attr('checked')) {
		           allChecked = false;
		        }
		    });
		
		   	$("#allChecked").attr("checked", allChecked);
		
		   	$("input[name='id']:checked").each(function() {
				ids += $(this).val() + ",";
			});

			ids = ids.substr(0, (ids.length - 1));
		
		   	$("#ids").val(ids);
		});
	});

	function selectAll(obj) {
		var ids = "";
		
		$("input[name='id']").each(function() {
		    $(this).attr("checked", obj.checked);
	    });

		$("input[name='id']:checked").each(function() {
			ids += $(this).val() + ",";
		});

		ids = ids.substr(0, (ids.length - 1));

		$("#ids").val(ids);
	}
</script>

 

以下为html页面全选checkbox和每个单一checkbox的html代码。

 

<!-- 全选的checkbox -->
<input type="checkbox" id="allChecked" οnclick="selectAll(this);" />

<!-- 每个单一的checkbox -->
<input type="checkbox" name="id" value="XXX" />

<!-- 用于存放被选中checkbox的id拼接后的字符串 -->
<input type="hidden" id="ids" name="ids" />