js达成checkbox全选、不选与反选的措施,checkbox全选

jquery方法如下:

Jquery代码

今日在公司要促成操作权限的效果与利益,要求依靠右边的树,选取一项,推断左侧的操作权限,例如,扩张,修改,删除,查看等开关的来得与隐敝;

js达成checkbox全选、不选与反选的方式,checkbox全选

正文实例叙述了js达成checkbox全选、不选与反选的点子。分享给咱们供我们参谋。具体深入分析如下:

一、思路:

  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>

期望本文所述对大家的javascript程序设计有所帮忙。

本文实例叙述了js完毕checkbox全选、不选与反选的法门。分享给我们供大家参谋。具体分…

复制代码 代码如下:

复制代码 代码如下:

其一效果实现思路如下:

function CheckAll(val) {
$(“input[name=’chkJob’]”).each(function() {
this.checked = val;
});
$(“#chkAll”).attr(“checked”, val);//设定全选开关状态
}

<script type=”text/javascript”
src=”jquery-1.4.2.min.js”></script>
<script type=”text/javascript”>
function Checked(){ //定义函数checked
$(“.chk”).each(function(){ //遍历html中class为chk的复选框标签
if($(this).attr(“checked”) == true){
//假如当前复选框的checked属性为true
$(this).attr(“checked”,false); //将该属性改为false
}
else{ //如若当前复选框的checked属性为false
$(this).attr(“checked”,true); //将该属性改为true
}
});
if($(“#lbl”).html() == “全选”){ //修改label的文件为“反选”
$(“#lbl”).html(“反选”);
}
else if($(“#lbl”).html() == “反选”){ //修改label的文件为“全选”
$(“#lbl”).html(“全选”);
}
}
$(document).ready(function(){ //为label增多click事件施行函数checked
$(“#lbl”).bind(“click”,Checked);
})
</script>

1、操作权限:扩充、修改等按键的ID和Text是保存在xml文件中;

val 该参数字传送递的是全选开关的抉择境况
name=’chkJob’ 这一个为列表中的checkbox名称
chkAll 就为全选开关名称
爱护上了Jquery的便利、明了···
与用JavaScript写的比起来确实有一点距离!
eg:
javascript 全选反选代码

Html代码

2、选取一项,加载xml文件中的按键数据,展现在右侧的页面,以checkbox展示;

复制代码 代码如下:

复制代码 代码如下:

3、全选checkbox,则选用具有的checkbox,裁撤则一个则全选开关也撤废选中;

//全选
function checkall() {
var all = document.getElementsByTagName(“input”);
for (var i = 0; i < all.length; i++) {
if (all[i].type == “checkbox”) {
all[i].checked = true;
}
}
}
//反选
function checknull() {
var all = document.getElementsByTagName(“input”);
for (var i = 0; i < all.length; i++) {
if (all[i].type == “checkbox”) {
all[i].checked = false;
}
}
}

<label id=”lbl”>全选</label>
<table>
<tr>
<td>
<input type=”checkbox” class=”chk” />
</td>
</tr>
<tr>
<td>
<input type=”checkbox” class=”chk” />
</td>
</tr>
<tr>
<td>
<input type=”checkbox” class=”chk” />
</td>
</tr>
<tr>
<td>
<input type=”checkbox” class=”chk” />
</td>
</tr>
<tr>
<td>
<input type=”checkbox” class=”chk” />
</td>
</tr>
</table>

4、将list群集转成json格式,传输到后台保存,后台每一回增添与修改都会咬定是不是留存,一纸空文则猛增,存在则修改;

复制代码 代码如下: function
CheckAll(val) { $(“input[name=’chkJob’]”).each(function() {
this.checked = val; }); $(“#chkAll”).attr(“checked”,
val);//设定…

O(∩_∩)O天天进步级中学一年级丢丢O(∩_∩)O
该BLOG供个人记录学习笔记,如有错误款待提议!

全套成效都已落实,全选效率参照他事他说加以考察了网络的代码。

您大概感兴趣的小说:

  • jquery复选框CHECKBOX全选、反选
  • JQUE奥迪Q7Y
    CHECKBOX全选,裁撤全选,反选方法三
  • jquery 达成的全选和反选
  • jquery input
    checked全选与反选1.3.2的版本
  • Jquery Check博克斯全选方法代码附js
    checkbox全选反选代码
  • jquery
    完结checkbox全选,反选,全不选等作用代码(奇数)
  • jQuery
    全选/反选以及单击行改动背景象实例
  • jQuery推断checkbox(复选框)是或不是被选中以及全选、反选完毕代码
  • Jquery 全选反选实例代码

温馨补充代码:选中一个后,全选开关要收回选中;

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CheckAll_Example.aspx.cs" Inherits="FormEditor.CheckAll_Example" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Jquery全选与反选checkbox</title>
    <script src="Scripts/jquery-1.9.1.js"></script>
</head>
<body>
    <div class="divCheckAll">
        <input type="checkbox" name="chk_list" id="chk_list_1" value="1" onclick="IsCheckAll()" />1<br />
        <input type="checkbox" name="chk_list" id="chk_list_2" value="2" onclick="IsCheckAll()" />2<br />
        <input type="checkbox" name="chk_list" id="chk_list_3" value="3" onclick="IsCheckAll()" />3<br />
        <input type="checkbox" name="chk_list" id="chk_list_4" value="4" onclick="IsCheckAll()" />4<br />
    </div>
    <input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
    <script type="text/javascript">
        $("#chk_all").click(function () {
            $("input[name='chk_list']").prop("checked", $(this).prop("checked"));
        });

        function IsCheckAll() {
            var totalCount = $(".divCheckAll").find("input[name='chk_list']").length;
            var count = 0;
            $(".divCheckAll").find("input[name='chk_list']").each(function () {
                //选中加一
                if ($(this).prop("checked")) {
                    count++;
                }
            });
            if (count < totalCount) {
                $("#chk_all").prop("checked", false);
            } else {
                $("#chk_all").prop("checked", true);
            }
        }
    </script>
</body>
</html>

PS:刚刚又修改了一段代码:贰个贰个入选,若是全数入选时,全选开关要选中。

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注