采用JAVASCRIPT实现全选的三种情况

来源：互联网发布：路由器访客网络开不开编辑：程序博客网时间：2024/05/16 04:23

通常采用JAVASCRIPT实现页面全选的，主要有下面三种情况：

1、当前页面中所有的CHECKBOX全部选中及取消。

2、当前页面中所有同名的CHECKBOX全部选中。

3、当前页面中所有具有相同前缀名的CHECKBOX全部选中。

这里以实例的形式，展示了三种情况的操作，完整源代码如下：

<html>

<head>

</head>

<body>

/********************全选示例********************/<br>

<b>水果（checkbox同名）：</b><br>

<b>水果2（checkbox不同名，具有相同的前缀名）：</b><br>

<input type="checkbox" name="vegetable" onclick="doChangeCheckStatus(this);">全选

</form>

</body>

</html>

function checkAll()

{

var objs = document.getElementsByTagName("input");

for(var i=0; i<objs.length; i++) {

if(objs[i].type.toLowerCase() == "checkbox" )

objs[i].checked = true;

}

function checkAllFruit()

{

var objs = document.getElementsByTagName("input");

for(var i=0; i<objs.length; i++) {

if(objs[i].type.toLowerCase() == "checkbox" )

if(objs[i].name.toLowerCase() == "fruit")

objs[i].checked = true;

}

function checkAllFruit2()

{

var objs = document.getElementsByTagName("input");

for(var i=0; i<objs.length; i++) {

if(objs[i].type.toLowerCase() == "checkbox" )

if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")

{

objs[i].checked = true;

}

function unCheckAll()

{

var objs = document.getElementsByTagName("input");

for(var i=0; i<objs.length; i++) {

if(objs[i].type.toLowerCase() == "checkbox" )

objs[i].checked = false;

}

function unCheckAllFruit()

{

var objs = document.getElementsByTagName("input");

for(var i=0; i<objs.length; i++) {

if(objs[i].type.toLowerCase() == "checkbox" )

if(objs[i].name.toLowerCase() == "fruit")

objs[i].checked = false;

}

function unCheckAllFruit2()

{

var objs = document.getElementsByTagName("input");

for(var i=0; i<objs.length; i++) {

if(objs[i].type.toLowerCase() == "checkbox" )

if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")

objs[i].checked = false;

}

function doChangeCheckStatus(obj)

{

if(obj.checked==true)

{

checkAll();

}

else

{

unCheckAll();

}

</script>