<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> checkbox全选与取消Demo 2011-08-16 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript">
<!--
/*
* 全选框checkbox控件事件
* eg:调用方法 <input type="checkbox" name="AllItem" id="allItem" οnclick="chkAllItems(this.checked,'subItem');">全选
* @flag 全选checkbox控件的状态
*
* @subItem 子选项checkbox的name的名称
*/
function chkAllItems(flag,subItem){
var _items=document.getElementsByName(subItem);//取得所有子选项的数组
for(var i=0;i<_items.length;i++){
_items[i].checked=flag;//将所有子选项checkbox的状态和全选checkbox状态设置成一致,即要么同时选中,要么同时取消。
}
}
/*
*每个单选按钮事件
*eg:调用方法
*<input type="checkbox" name="subItem" value="1" οnclick="chkSingleItem('allItem','subItem');"/>Trouble is a fridend.
*<input type="checkbox" name="subItem" value="2" οnclick="chkSingleItem('allItem','subItem');"/>A place near by .
*
*@allItem 全选框checkbox控件的id值
*@subItem 子选项checkbox的name的名称
*/
function chkSingleItem(allItem,subItem){
var flag=true;//设置默认的全选标识状态为true
var _items=document.getElementsByName(subItem);
for(var i=0;i<_items.length;i++){
if(!_items[i].checked) {
flag=false;//如果子选项中有一个未选中,则设置全选标识状态为false
break;
}
}
document.getElementById(allItem).checked=flag;//重新设置全选状态。
}
/*
*删除选中项按钮的事件
*eg:调用方法 <input type="button" οnclick="delSelectedItems('subItem');" value="删除选中"/>
*@subItem 子选项checkbox的name的名称
*@return 返回所有选中的子控件checkbox的value值
*/
function delSelectedItems(subItem){
var ids=[];
var _items=document.getElementsByName(subItem);
for(var i=0;i<_items.length;i++){
if(_items[i].checked) {
ids.push(_items[i].value);
}
}
var _ids =ids.join(',');
if(ids.length==0) {
alert("请选择要删除的选项!");
return false;
}
alert("选中的主键:"+ids);
return _ids;
}
function initData(){
var data='';
data+='<li><input type="checkbox" name="subItem" value="1" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>Trouble is a fridend.</li>';
data+='<li><input type="checkbox" name="subItem" value="2" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>A place near by .</li>';
data+='<li><input type="checkbox" name="subItem" value="3" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>No pain,no gain.</li>';
data+='<li><input type="checkbox" name="subItem" value="4" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>East and west ,home is best.</li>';
data+='<li><input type="checkbox" name="subItem" value="5" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>Beauty lies in the lover\'s eyes.</li>';
data+='<li><input type="checkbox" name="subItem" value="6" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>Don\'t bite the hand feed u .</li>';
data+='<li><input type="checkbox" name="subItem" value="7" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>Love one another and you\'ll be happy.it\'s as simple and as difficult as that.</li>';
data+='<li><input type="checkbox" name="subItem" value="8" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>Do you know how much i love you .</li>';
data+='<li><input type="checkbox" name="subItem" value="9" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>One swallow does not make a summer.</li>';
data+='<li><input type="checkbox" name="subItem" value="10" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>Impossible is nothing.</li>';
document.getElementById('dataList').innerHTML=data;
}
οnlοad=function(){initData();}
//-->
</script>
</head>
<body>
<br /> <br /> <br /> <br /> <br />
<ul><li><input type="checkbox" name="AllItem" id="allItem" οnclick="chkAllItems(this.checked,'subItem');">全选</li></ul>
<ol id="dataList">
<li>
数据加载中……
</li>
</ol>
<ul><li><input type="button" οnclick="delSelectedItems('subItem');" value="删除选中"/></li></ul>
</body>
</html>
<html>
<head>
<title> checkbox全选与取消Demo 2011-08-16 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript">
<!--
/*
* 全选框checkbox控件事件
* eg:调用方法 <input type="checkbox" name="AllItem" id="allItem" οnclick="chkAllItems(this.checked,'subItem');">全选
* @flag 全选checkbox控件的状态
*
* @subItem 子选项checkbox的name的名称
*/
function chkAllItems(flag,subItem){
var _items=document.getElementsByName(subItem);//取得所有子选项的数组
for(var i=0;i<_items.length;i++){
_items[i].checked=flag;//将所有子选项checkbox的状态和全选checkbox状态设置成一致,即要么同时选中,要么同时取消。
}
}
/*
*每个单选按钮事件
*eg:调用方法
*<input type="checkbox" name="subItem" value="1" οnclick="chkSingleItem('allItem','subItem');"/>Trouble is a fridend.
*<input type="checkbox" name="subItem" value="2" οnclick="chkSingleItem('allItem','subItem');"/>A place near by .
*
*@allItem 全选框checkbox控件的id值
*@subItem 子选项checkbox的name的名称
*/
function chkSingleItem(allItem,subItem){
var flag=true;//设置默认的全选标识状态为true
var _items=document.getElementsByName(subItem);
for(var i=0;i<_items.length;i++){
if(!_items[i].checked) {
flag=false;//如果子选项中有一个未选中,则设置全选标识状态为false
break;
}
}
document.getElementById(allItem).checked=flag;//重新设置全选状态。
}
/*
*删除选中项按钮的事件
*eg:调用方法 <input type="button" οnclick="delSelectedItems('subItem');" value="删除选中"/>
*@subItem 子选项checkbox的name的名称
*@return 返回所有选中的子控件checkbox的value值
*/
function delSelectedItems(subItem){
var ids=[];
var _items=document.getElementsByName(subItem);
for(var i=0;i<_items.length;i++){
if(_items[i].checked) {
ids.push(_items[i].value);
}
}
var _ids =ids.join(',');
if(ids.length==0) {
alert("请选择要删除的选项!");
return false;
}
alert("选中的主键:"+ids);
return _ids;
}
function initData(){
var data='';
data+='<li><input type="checkbox" name="subItem" value="1" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>Trouble is a fridend.</li>';
data+='<li><input type="checkbox" name="subItem" value="2" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>A place near by .</li>';
data+='<li><input type="checkbox" name="subItem" value="3" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>No pain,no gain.</li>';
data+='<li><input type="checkbox" name="subItem" value="4" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>East and west ,home is best.</li>';
data+='<li><input type="checkbox" name="subItem" value="5" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>Beauty lies in the lover\'s eyes.</li>';
data+='<li><input type="checkbox" name="subItem" value="6" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>Don\'t bite the hand feed u .</li>';
data+='<li><input type="checkbox" name="subItem" value="7" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>Love one another and you\'ll be happy.it\'s as simple and as difficult as that.</li>';
data+='<li><input type="checkbox" name="subItem" value="8" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>Do you know how much i love you .</li>';
data+='<li><input type="checkbox" name="subItem" value="9" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>One swallow does not make a summer.</li>';
data+='<li><input type="checkbox" name="subItem" value="10" οnclick="chkSingleItem(\'allItem\',\'subItem\');"/>Impossible is nothing.</li>';
document.getElementById('dataList').innerHTML=data;
}
οnlοad=function(){initData();}
//-->
</script>
</head>
<body>
<br /> <br /> <br /> <br /> <br />
<ul><li><input type="checkbox" name="AllItem" id="allItem" οnclick="chkAllItems(this.checked,'subItem');">全选</li></ul>
<ol id="dataList">
<li>
数据加载中……
</li>
</ol>
<ul><li><input type="button" οnclick="delSelectedItems('subItem');" value="删除选中"/></li></ul>
</body>
</html>