>

不选或全不选效能,JS达成CheckBox复选框全选

- 编辑:正版管家婆马报彩图 -

不选或全不选效能,JS达成CheckBox复选框全选

CheckBox控件表雅培(Abbott)个特定的动静(即选项)是选定 (on,值为1) 依然裁撤(off,值为0)。在应用程序中使用该控件为客商提供“True/False”或“yes/no”的挑选。因为 CheckBox 互相独立工作,所以顾客能够并且接纳随机五个CheckBox,进行分选组合。

JS完毕CheckBox复选框全选、不选或全不选功力,jscheckbox

CheckBox控件表Bellamy(Bellamy)个特定的气象(即选项)是选定 (on,值为1) 照旧取消(off,值为0)。在应用程序中选用该控件为顾客提供“True/False”或“yes/no”的取舍。因为 CheckBox 互相独立专门的工作,所以客户能够相同的时候选用随机多少个CheckBox,进行采纳组合。

CheckBox复选框JS完成全选、不选、全不选功效,很轻巧,具体内容如下

思路:

  • 1、获取元素
  • 2、给全选 不选 反选加多点击事件
  • 3、用for循环checkbox
  • 4、把checkbox的checked设置为true即完成全选
  • 5、把checkbox的checked设置为false即完毕不选
  • 6、通过if推断,若是checked为true选中状态的,就把checked设为false不选状态,要是checked为false不选状态的,就把checked设为true选中状态。

html代码:    

 <input type="button" value="全选" id="sele"/>
  <input type="button" value="不选" id="setinterval"/>
  <input type="button" value="反选" id="clear"/>
   <div id="checkboxs">
    <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 />
    <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>

js代码:

<script>
window.onload=function(){

var sele=document.getElementById('sele');//获取全选
var unsele=document.getElementById('setinterval');//获取不选
var clear=document.getElementById('clear');//获取反选
var checkbox=document.getElementById('checkboxs');//获取div
var checked=checkbox.getElementsByTagName('input');//获取div下的input
//全选
sele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=true
}
}

//不选
unsele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=false
}
}
//反选
clear.onclick=function(){
for(i=0;i<checked.length;i++){
if(checked[i].checked==true){
checked[i].checked=false
}
else{
checked[i].checked=true
}
}
}



}
</script>

如上所述正是本文的全体内容了,希望我们能够喜欢。

Check博克斯复选框JS达成全选、不选、全不选功力,很粗大略,具体内容如下

你只怕感兴趣的稿子:

  • js checkbox(复选框) 使用集锦
  • javascript 设置某DIV区域内的checkbox复选框
  • Js动态增进复选框Checkbox的实例方法
  • Extjs 4.x 获得form CheckBox 复选框的值
  • javascript获得checkbox复选框获取选中的取舍
  • js获取checkbox复选框选中的选项实例
  • javascript达成checkbox复选框实例代码

CheckBox控件表美素佳儿(Friso)个一定的场馆(即选项)是选定 (on,值为1) 依然裁撤(off,值为0...

思路:

  • 1、获取成分
  • 2、给全选 不选 反选增添点击事件
  • 3、用for循环checkbox
  • 4、把checkbox的checked设置为true即完结全选
  • 5、把checkbox的checked设置为false即达成不选
  • 6、通过if判定,如若checked为true选中状态的,就把checked设为false不选状态,如若checked为false不选状态的,就把checked设为true选中状态。

html代码:    

 <input type="button" value="全选" id="sele"/>
  <input type="button" value="不选" id="setinterval"/>
  <input type="button" value="反选" id="clear"/>
   <div id="checkboxs">
    <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 />
    <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>

js代码:

<script>
window.onload=function(){

var sele=document.getElementById('sele');//获取全选
var unsele=document.getElementById('setinterval');//获取不选
var clear=document.getElementById('clear');//获取反选
var checkbox=document.getElementById('checkboxs');//获取div
var checked=checkbox.getElementsByTagName('input');//获取div下的input
//全选
sele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=true
}
}

//不选
unsele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=false
}
}
//反选
clear.onclick=function(){
for(i=0;i<checked.length;i++){
if(checked[i].checked==true){
checked[i].checked=false
}
else{
checked[i].checked=true
}
}
}



}
</script>

上述所述正是本文的全体内容了,希望大家能够喜欢。

你只怕感兴趣的文章:

  • JS完毕CheckBox复选框全选全不选功力
  • javascript 复选框选取/全选后特效
  • js与jQuery达成checkbox复选框全选/全不选的主意
  • JS完成复选框的全选和批量去除成效
  • js html css达成复选框全选与反选
  • js达成复选框的全选和撤回全选效果
  • 由此js来制作复选框的全选和不选作用
  • js全选达成和判定是还是不是有复选框选中的方法
  • JS中怎么着达成复选框全选功效
  • javaScript贯彻复选框全选反选事件详解

本文由计算机操作发布,转载请注明来源:不选或全不选效能,JS达成CheckBox复选框全选