如何用html做复选框全选中和全不选中

如何用html做复选框全选中和全不选中,第1张

1.这个要使用js来判断是否选中,需要引用jquery

<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>

<script type="text/javascript">

$(function(){

 $("#all").change(function(){//判断全选框的改变

  var flage =$(this).is(":checked")//全选选中为true,否则为false

  $("input[type=checkbox]").each(function(){

  $(this).prop("checked",flage)

  })

 })

})

</script>

<input type="checkbox" id="all" />全选

<input type="checkbox" />

<input type="checkbox" />

 <input type="checkbox" />

这涉及到javascript中的语言知识了,使用的是if判断来进行的,我这里有个副本

<script>

window.onload=function ()

{

var odiv=document.getElementById('div1')

var obtn1=document.getElementById('btn1')

var obtn2=document.getElementById('btn2')

var obtn3=document.getElementById('btn3')

var ach=odiv.getElementsByTagName('input')

obtn1.onclick=function ()

{

for(var i=0i<ach.lengthi++)

{

ach[i].checked=true

}

}

obtn2.onclick=function ()

{

for(var i=0i<ach.lengthi++)

{

ach[i].checked=false

}

}

obtn3.onclick=function ()

{

for(var i=0i<ach.lengthi++)

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

{

ach[i].checked=false

}

else{

ach[i].checked=true

}

}

}

}

</script>

<body>

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

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

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

<div id="div1">

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

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

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

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

</div>

</body>

<script type="text/javascript" language="javascript">

function selectAllDels()

{ var allCheckBoxs = document.getElementsByName("preDelCheck")

var desc = document.getElementById("allChecked")

var selectOrUnselect=false

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

if(allCheckBoxs[i].checked){

selectOrUnselect=true

break} }

if (selectOrUnselect) {

_allUnchecked(allCheckBoxs)}else {

_allchecked(allCheckBoxs)} }

function _allchecked(allCheckBoxs){

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

allCheckBoxs[i].checked = true} }

function _allUnchecked(allCheckBoxs){

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

allCheckBoxs[i].checked = false} } </script>

<form><input type="checkbox" name="preDelCheck" value="cream">ID1

<input type="checkbox" name="preDelCheck" value="sugar" >ID2

<input type="checkbox" name="preDelCheck" value="sugar">ID3

<input type="button" id="allChecked" value="全选/取消全选" onClick="selectAllDels()"></form>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7005695.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存