javascript 动态控制复选框的选择和取消
这里就需要引入一个jquery-1.4.2.js 就行了，因为用到了里面的选择器
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
function CheckBox(){
var outupType = $('input[name="outupType"]:checked').val();
var outuparray = $('input[name="outupType"]').length;
var i=0;
var scheck = $('input[name="outupType"]')[i].checked;
var scheck1 = $('input[name="outupType"]')[i+1].checked;
var scheck2 = $('input[name="outupType"]')[i+2].checked;
var scheck3 = $('input[name="outupType"]')[i+3].checked;
var scheck4 = $('input[name="outupType"]')[i+4].checked;
if(scheck == true ){
$('input[name="outupType"]')[i+1].checked = true;
$('input[name="outupType"]')[i+2].checked = true;
$('input[name="outupType"]')[i+3].checked = true;
$('input[name="outupType"]')[i+4].checked = true;
}else{
$('input[name="outupType"]')[i+1].checked = false;
$('input[name="outupType"]')[i+2].checked = false;
$('input[name="outupType"]')[i+3].checked = false;
$('input[name="outupType"]')[i+4].checked = false;
}
}
function CheckBoxs(){
var i=0;
var scheck = $('input[name="outupType"]')[i].checked;
var scheck1 = $('input[name="outupType"]')[i+1].checked;
var scheck2 = $('input[name="outupType"]')[i+2].checked;
var scheck3 = $('input[name="outupType"]')[i+3].checked;
var scheck4 = $('input[name="outupType"]')[i+4].checked;
if(scheck1==true && scheck2 == true && scheck3 == true && scheck4 == true){
$('input[name="outupType"]')[i].checked = true;
}else{
$('input[name="outupType"]')[i].checked = false;
}
}
</script>
</head>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- 出力内容 BEGIN -->
<tr height="25" class="tyouhyou_8pt">
<td bgcolor="#FFB56A" width="65" align="center">出力内容</td>
<td align="left">
<table>
<tr>
<td width="90"><input type="checkbox" onclick="CheckBox()" name="outupType" value="1" />全項目選択</td>
</tr>
<tr>
<td width="90"><input type="checkbox" onclick="CheckBoxs()" name="outupType" value="2" />個人情報</td>
</tr>
<tr>
<td width="90"><input type="checkbox" onclick="CheckBoxs()" name="outupType" value="3" />緊急連絡先</td>
</tr>
<tr>
<td width="90"><input type="checkbox" onclick="CheckBoxs()" name="outupType" value="4" />金融機関</td>
</tr>
<tr>
<td width="160"><input type="checkbox" onclick="CheckBoxs()"name="outupType" value="5" />職業 服・靴のサイズ</td>
</tr>
</table>
</td>
</tr>
</body>
<!-- 出力内容 END -->
</html>
- 上一篇 »HTML5 手机端动态适配
- 下一篇 »java swing 复选框JCheckButton