js表单 全选勾选问题

JavaScript015

js表单 全选勾选问题,第1张

<!DOCTYPE html>

<html>

 <head>

  <title>JS实现全选、不选、反选 </title>

<meta name="content-type" content="text/html charset=UTF-8">

 </head>

 <body>

<input type="button" id="All" value="全选" />

<input type="button" id="uncheck" value="不选" />

<input type="button" id="othercheck" value="反选" />

<div id="div">

    <input type="checkbox" />苹果<br />

    <input type="checkbox" />火龙果<br />

    <input type="checkbox" />橘子<br />

    <input type="checkbox" />葡萄<br />

    <input type="checkbox" />香蕉<br />

    <input type="checkbox" />提子<br />

    <input type="checkbox" />栗子<br />

 </body>

</html>

<script>

window.onload=function(){

    var CheckAll=document.getElementById('All')

    var UnCheck=document.getElementById('uncheck')

    var OtherCheck=document.getElementById('othercheck')

    var div=document.getElementById('div')

    var    CheckBox=div.getElementsByTagName('input')

    CheckAll.onclick=function(){

            for(i=0i<CheckBox.lengthi++){

                    CheckBox[i].checked=true

                }

        }

    UnCheck.onclick=function(){

            for(i=0i<CheckBox.lengthi++){

                    CheckBox[i].checked=false

                }

        }

    othercheck.onclick=function(){

            for(i=0i<CheckBox.lengthi++){

                    if(CheckBox[i].checked==true){

                            CheckBox[i].checked=false

                        }

                    else{

                        CheckBox[i].checked=true

                        }

                    

                }

        }

}

</script>

js勾选复选框示例i：

//获取页面所有checkbox（checkbox的name设置一致）

var items=document.getElementByName("checkbox的name")

//遍历checkbox

for(var i=0i<items.lengthi++){

    //当前checkbox实现勾选

    items[i].checked=true

}

如下代码可以实现：

<input type="checkbox" onclick="SetInput(this,'S')" />S <input type="checkbox" onclick="SetInput(this,'M')" />M <input type="checkbox" onclick="SetInput(this,'L')" />L  <input type="checkbox" onclick="SetInput(this,'XL')" />XL

<div id="divBox"></div>

<script>

function SetInput(v, vt){

var div = document.getElementById("divBox")

if(v.checked)

div.innerHTML += "<div id='divIp"+vt+"'>"+vt+": <input type='text' value='"+vt+"' /></div>"

else

div.removeChild(document.getElementById("divIp"+vt))

}

</script>