checkAll方法是实现CheckBox的全选和取消全选的,利

作者: 前端  发布:2019-08-30

javascript中CheckBox全选终极方案

   在javascript页面中实现CheckBox或者Radio的选中状态是一件很容易的事情,下面我们来给大家展示下在asp.net中使用javascript中CheckBox全选终极方案,有需要的小伙伴可以参考下。

  在我们的程序开发中经常会要用到CheckBox的全选,通常情况下是在一些数据绑定控件中如Gridview等

  下面以Repeater为例,在Repeater的header 和item中放入CheckBox控件 。

  ?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<asp:Repeater ID="rptGroup" runat="server">

<HeaderTemplate>

<table width="100%" cellspacing="1" >

<tr>

<td width="3%" align="center" >

<input type="checkbox" id="chkAll" name="chkAll" value="checkbox"

onclick="checkAll ('chkAll',this);" />

</td>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr>

<td align="center" >

<input type="checkbox" name="chkSelect" value='<%# Eval("ID") %>'

onclick="checkAll('chkAll',this);"/>

</td>

</tr>

</ItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

  下面就是js脚本了

  checkAll方法是实现CheckBox的全选和取消全选的。

  ?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

function checkAll(chkAllID, thisObj) {

var chkAll = document.getElementById(chkAllID);

var chks = document.getElementsByTagName("input");

var chkNo = 0;

var selectNo = 0;

for (var i = 0; i < chks.length; i ) {

if (chks[i].type == "checkbox") {

//全选触发事件

if (chkAll == thisObj) {

chks[i].checked = thisObj.checked;

}

//非全选触发

else {

if (chks[i].checked && chks[i].id != chkAllID)

selectNo ;

}

if (chks[i].id != chkAllID) {

chkNo ;

}

}

}

if (chkAll != thisObj) {

chkAll.checked = chkNo == selectNo;

}

}

  checkSelectNo 函数是用来获取 所有checkbox 选中的个数 这个在用来判断 是否有勾选时非常有用。

  ?

1

2

3

4

5

6

7

8

9

10

11

12

function checkSelectNo(chkAllID) {

var chks = document.getElementsByTagName("input");

var selectNo = 0;

for (var i = 0; i < chks.length; i ) {

if (chks[i].type == "checkbox") {

if (chks[i].id != chkAllID && chks[i].checked) {

selectNo ;

}

}

}

return selectNo;

}

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

在javascript页面中实现CheckBox或者Radio的选中状态是一件很容易的事情,下面我们来给大家展示下在asp.net中使用...

javascript中CheckBox全选终极方案,javascriptcheckbox

在我们的程序开发中经常会要用到CheckBox的全选,通常情况下是在一些数据绑定控件中如Gridview等

下面以Repeater为例,在Repeater的header 和item中放入CheckBox控件 。

<asp:Repeater ID="rptGroup" runat="server"> 
  <HeaderTemplate> 
    <table width="100%" cellspacing="1" >
      <tr> 
        <td width="3%" align="center" >
         <input type="checkbox" id="chkAll" name="chkAll" value="checkbox" 
         onclick="checkAll  ('chkAll',this);" />             
        </td> 
      </tr> 
  </HeaderTemplate> 
  <ItemTemplate> 
    <tr> 
    <td align="center" >
     <input type="checkbox" name="chkSelect" value='<%# Eval("ID") %>' 
     onclick="checkAll('chkAll',this);"/>
    </td> 
    </tr> 
  </ItemTemplate> 
  <FooterTemplate> 
    </table> 
  </FooterTemplate> 
 </asp:Repeater> 

下面就是js脚本了

checkAll方法是实现CheckBox的全选和取消全选的。

function checkAll(chkAllID, thisObj) {
  var chkAll = document.getElementById(chkAllID);
  var chks = document.getElementsByTagName("input");
  var chkNo = 0;
  var selectNo = 0;
  for (var i = 0; i < chks.length; i  ) {
    if (chks[i].type == "checkbox") {
      //全选触发事件  
      if (chkAll == thisObj) {
        chks[i].checked = thisObj.checked;
      }
      //非全选触发 
      else {
        if (chks[i].checked && chks[i].id != chkAllID)
          selectNo  ;
      }
      if (chks[i].id != chkAllID) {
        chkNo  ;
      }
    }
  }
  if (chkAll != thisObj) {
    chkAll.checked = chkNo == selectNo;
  }
} 

checkSelectNo 函数是用来获取 所有checkbox 选中的个数 这个在用来判断 是否有勾选时非常有用。

function checkSelectNo(chkAllID) {
  var chks = document.getElementsByTagName("input");
  var selectNo = 0;
  for (var i = 0; i < chks.length; i  ) {
    if (chks[i].type == "checkbox") {
      if (chks[i].id != chkAllID && chks[i].checked) {
        selectNo  ;
      }
    }
  }
  return selectNo;
} 

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

在我们的程序开发中经常会要用到CheckBox的全选,通常情况下是在一些数据绑定控件中如Gri...

做大批量的数据删除时,如果有个全选按钮把多个页面上显示的记录全都选中删除那比一条条的删除要人性化得多,接下来说一说如何实现,其实网上一搜有好多文章都是说如何进行批量删除的,大体上可以分为两大类1:利用JS脚本实现全选。2:在服务器端实现全选
首先来说一说如何利用JS实现全选
往页面上拖一个GridView,设置好数据源,并为GridView添加一个模板列,往模板列里添加一个chekcbox,比如下面的代码

图片 1<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"
图片 2    DataSourceID="SqlDataSource1">
图片 3    <Columns>
图片 4        <asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
图片 5            ReadOnly="True" SortExpression="ProductID" />
图片 6        <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
图片 7        <asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
图片 8        <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" />
图片 9        <asp:TemplateField>
图片 10            <ItemTemplate>
图片 11                <asp:CheckBox ID="chk_Del" runat="server" />
图片 12            </ItemTemplate>
图片 13        </asp:TemplateField>
图片 14    </Columns>
图片 15</asp:GridView>

接下来往页面上添加一个checkbox控件
<asp:CheckBox ID="chk_JS" runat="server" Text="全选(JS)" onclick="selectAll(this)"/>
并为该控件编写JS脚本如下:

图片 16<script type="text/javascript">
图片 17    //根据传入的checkbox的选中状态设置所有checkbox的选中状态
图片 18    function selectAll(obj)
图片 19图片 20    图片 21{
图片 22        var allInput = document.getElementsByTagName("input");
图片 23        //alert(allInput.length);
图片 24        var loopTime = allInput.length;
图片 25        for(i = 0;i < loopTime;i )
图片 26图片 27        图片 28{
图片 29            //alert(allInput[i].type);
图片 30            if(allInput[i].type == "checkbox")
图片 31图片 32            图片 33{
图片 34                allInput[i].checked = obj.checked;
图片 35            }
图片 36        }
图片 37    }
图片 38</script>

基本效果就有了,接下来我们在点缀一下。在网页中添加一个button
<asp:Button ID="btn_DeleteRecords" runat="server" OnClientClick="return judgeSelect();" Text="删除选中记录" />
添加JS脚本

图片 39//判断是否选中记录,用户确认删除
图片 40function judgeSelect()
图片 41图片 42图片 43{
图片 44    var result = false;
图片 45    var allInput = document.getElementsByTagName("input");
图片 46    var loopTime = allInput.length;
图片 47    for(i = 0;i < loopTime;i )
图片 48图片 49    图片 50{
图片 51        if(allInput[i].checked)
图片 52图片 53        图片 54{
图片 55            result = true;
图片 56            break;
图片 57        }
图片 58    }
图片 59    if(!result)
图片 60图片 61    图片 62{
图片 63        alert("请先选则要删除的记录!");
图片 64        return result;
图片 65    }
图片 66    result = confirm("你确认要删除选定的记录吗?");
图片 67    return result;
图片 68}

2通过服务器端代码实现全选
向页面同添加一个CheckBox并将AutoPostBack属性设置成true,并为它添加CheckedChanged事件
<asp:CheckBox ID="chk_Server" runat="server" OnCheckedChanged="chk_Server_CheckedChanged" Text="全选(Server)" AutoPostBack="True" />
事件代码如下

图片 69int a = this.GridView1.Rows.Count;
图片 70for (int i = 0; i < a; i )
图片 71图片 72图片 73{
图片 74    CheckBox chk = (CheckBox)this.GridView1.Rows[i].FindControl("chk_Del");
图片 75    chk.Checked = this.chk_Server.Checked;
图片 76}

本文由9159.com发布于前端,转载请注明出处:checkAll方法是实现CheckBox的全选和取消全选的,利

关键词: 9159.com