嘿牛程序员成都传智博客JavaScript中的复选框的全选、反选问题

最新推荐文章于 2024-04-15 10:12:24 发布

xiaoxiu19841

最新推荐文章于 2024-04-15 10:12:24 发布

阅读量2.1k

点赞数

分类专栏： java学习文章标签： javascript function xhtml android java 嵌入式

本文链接：https://blog.csdn.net/xiaoxiu19841/article/details/7686780

版权

java学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

---------------------- android培训、java培训、期待与您交流！ ----------------------

本节探讨JavaScript中的复选框问题
复选框一般涉及到全选、全不选、反选等问题（全选和全不选可以看作一个复选框的两种实现）。当调用javascript时，可以通过传入name属性以及id属性。用到的方法是document.getElementByName（"name值"）、document.getElementByTd（"id值"）只是二者在应用的时候，name属性只能以数组的形式调用,而id属性可以直接调用。如下面程序中的allCk[0].checked 和allCk.checked，分别来获取复选框的赋值情况。
下面是填写一个你喜欢的运动的复选框。

<!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>

<style type="text/css" media=screen,projection>

</style>

[0].checked-->
function checkEvent(name, allCheckId)
{
        var allCk = document.getElementById(allCheckId);
        //var allCk = document.getElementByName(allCheckId);
         // if (allCk[0].checked == true)
         if (allCk.checked == true)

            checkAll(name);
        else
            checkAllNo(name);
}
//全选
function checkAll(name)
{
var names=document.getElementsByName(name);
   var len=names.length;
if(len>0)
{
   var i=0;
   for(i=0;i<len;i++)
   names[i].checked=true;

}
}
//全不选
function checkAllNo(name)
{
var names=document.getElementsByName(name);
var len=names.length;
if(len>0)
{
    var i=0;
    for(i=0;i<len;i++)
    names[i].checked=false;
}
}

//反选

function reserveCheck(name)
{
    var names = document.getElementsByName(name);
    var len = names.length;
    if (len > 0)
    {
        var i = 0;
        for (i = 0; i < len; i++)
        {
            if (names[i].checked)
                names[i].checked = false;
            else
                names[i].checked = true;

}
}

}

</script>
</head>

<body>

<p>选择你喜欢的运动</p>
<form>
<ul>
<li><input type="checkbox" name="ck" value="1" >篮球<br></li>
<li><input type="checkbox" name="ck" value="2" >足球<br></li>
<li><input type="checkbox" name="ck" value="3">排球<br></li>
<li><input type="checkbox" name="ck" value="4" >羽毛球<br></li>
<li><input type="checkbox" name="ck" value="5">乒乓球<br></li>
<li><input type="checkbox" name="checkbox1" id="ckall" οnclick="checkEvent('ck','ckall')">全选<!-- οnclick="checkEvent

('ck','checkbox1')" -->
<input type="checkbox" id="ckReserve" οnclick="reserveCheck('ck','ckReserve')" />反选
<br /></li>
</ul>
</form>
</body>
</html>

实现网页截图如下