<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//全選
$('#btnCheckAll').click(function() {
//1.6+以上的版本支持prop
$('input:checkbox').prop('checked',true);
});
//全不選
$('#btnCheckNone').click(function() {
//第一種方法
//$('input:checkbox').attr('checked',false);
//第二種方法
$('input:checkbox').prop('checked',false);
});
//反選
$('#btnCheckReverse').click(function() {
$('input:checkbox').each(function() {
$(this).prop('checked',!$(this).prop('checked'));
});
});
});
</script>
</head>
<body>
<div>
<input name="chkItem" type="checkbox" value="今日話題" />今日話題
<input name="chkItem" type="checkbox" value="視覺焦點" />視覺焦點
<input name="chkItem" type="checkbox" value="財經" />財經
<input name="chkItem" type="checkbox" value="汽車" />汽車
<input name="chkItem" type="checkbox" value="科技" />科技
<input name="chkItem" type="checkbox" value="房產" />房產
<input name="chkItem" type="checkbox" value="旅遊" />旅遊
</div>
<div>
<input id="btnCheckAll" type="button" value="全選" />
<input id="btnCheckNone" type="button" value="全不選" />
<input id="btnCheckReverse" type="button" value="反選" />
<input id="btnSubmit" type="button" value="提交" />
</div>
</body>
</html>複選框兼容性問題
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章