js实现datalist中checkbox全选或取消

最新推荐文章于 2019-06-10 19:38:08 发布
最新推荐文章于 2019-06-10 19:38:08 发布
阅读量1.1k 收藏
点赞数
分类专栏： 脚本 文章标签： javascript function input asp 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lpfjinxinjinli/article/details/5693454
版权

测试OK

1,全选按钮

<input id="Checkbox2" type="checkbox" οnclick="SelectAll(this,'DataList2')" />

2,DataList2中加checkbox控件

<asp:CheckBox  id="chkItem"  runat="server"></asp:CheckBox>

3,引用JS

<head>

<script type="text/javascript" language="javascript" >
    function SelectAll(tempControl,tempSpan)
    {
      //将除头模板中的其它所有的CheckBox取反
      var theBox=tempControl;

      var xState=theBox.checked;
      var strTemp=tempSpan;
      elem=theBox.form.elements;
      for(i=0;i<elem.length;i++)
      {
           if(elem[i].type=="checkbox" && elem[i].id!=theBox.id&& elem[i].name.substr(0,elem[i].name.indexOf('$'))==strTemp)
            {
                 if(elem[i].checked!=xState)
                 {
                  elem[i].click();
                 }
            ///以下为反选    
                 if(elem[i].checked==false)
                 {
                    elem[i].checked=true;
                  }
                 else
                  {
                      elem[i].checked=false;
                   }
           ///以上为反选
            }
      }
    }

    </script>

</head>

4,当使用者选择好后台代码取得某列CheckBox的值: 
 for  (int  i  =  0;i  <this.DataList2.Items.Count;i++) 
{ 
               bool  blnIfSelect  =  ((CheckBox)this.DataList2.Items[i].FindControl("chkItem")).Checked; 
               ....;      //这是可以根据blnIfSelect进行各种操作了                   
}

 

转载：http://kbc11.blog.163.com/blog/static/8910199720096310484135/

lpfjinxinjinli
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
删除datalist下的option
grin99的博客
07-20 1601
在Stack Overflow上看到的方法，记录一下 html： <input class="form-control" id="test" type="text" list="test_list"> <datalist id="test_list"> <option value="1"></option> <option value="2"></option>
DataList CheckBox 全选删除
瀚海长空
04-07 1735
 最近需要用到一个全选删除功能。主要思路这个例子是用一个隐藏的服务器控件 input type="hiddent"来绑定每项的唯一建值ID当然也有其它的办法。网上有用checkbox的value值来绑定ID 但是我试了没管用。还可以用label来绑定。然后把控件的是否显示属性设为false但是我没做过具体用起来什么情况也不知道。看下面的代码由于是在外面上网没有VS 代码全是用记事本写的。可
Datalist 复选框 全选，单选
xiaocai06的专栏
09-22 1347
 void Page_Load(Object s, EventArgs e)  {   DataTable dt = new DataTable();   dt.Columns.Add(new DataColumn("id", typeof(int)));   DataRow dr;      for(int i=0; i  {    dr = dt.NewRow();    dr[0] =
DataList 全选
xuebao2的专栏
05-09 571
private void btnSelectAll_Click(object sender, System.EventArgs e){   //循环设置DataList控件中的项   System.Web.UI.WebControls.CheckBox chkStu;foreach(DataListItem oDataListItem inDataList1.Items){//建立模板列中Chec
datalist 全选
anpeng9657的博客
02-28 139
JS: function AddRemoveValues(oChk) //选择或反选单项时调用的function { if(oChk.checked) { document.getElementById('TextBox1').value +=oChk.value + "," ; ...
asp.net之DataList里的CheckBox实现全选、反选删除
yangmingxing980的专栏
03-25 1369
前台主要代码： 全选
EasyUi datagrid列表增加复选框
weixin_30788731的博客
05-10 585
本文为博主原创，未经允许不得转载 1.增加复选框列 { field: 'oid', title: '<input type=\"checkbox\" name=\"selectRadioList\" id=\"selectRadioList\" checked= true onchange="selectAll()"/>', width: 28,...
easyui全选、取消所有页
duqian42707的博客
01-14 3212
关键代码：全部代码：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <
js选取值,全选,datagrid,datalist 全选反选
胡杰的专栏
03-10 1883
1.script language="javascript" type="text/javascript">function ok(){  var temp=document.getElementsByName("radio");  for (i=0;itemp.length;i++){  //遍历Radio    if(temp[i].checked)      {    alert("你选
DataList代码示例
03-28
DataList基本的用法，其中包括编辑、删除、添加、更新、取消等基本操作的代码示例，另外还使用PagedataSource来实现了数据的分页。
解决datalist中单选按钮可以多选的问题（Asp.Net）
学习的约束力，提醒自己
12-26 1669
问题描述：Asp.Net中datalist等web控件里面，放多个单选按钮的时候可以同时多选，可以采取以下放法。问题解决：最理想的解决之道，用javascript：function clickit() {        var dom=document.all;        var el=event.srcElement;        if(el.tagName=="INPUT"&&el.ty
在datalist中实现“删除”功能的三种方法
weixin_34348111的博客
09-09 636
aspx文件中关于DataList的代码： <asp:DataList ID="lbDatalist" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" SkinID="foo" OnItemCommand="lbDatalist_ItemCommand"> //红色...
利用js给datalist或select动态添加option选项
热门推荐
wdhouyigege的博客
06-26 1万+
利用js给select或datalist动态添加option选项
DataList增加复选框方法,以及获选中项的值
emailqjc的专栏
04-02 6143
1、为了有复选框，增加CheckBox到DataList上2、在DataList上的项上设置数据列3、确认选择获得选择项对应分店编号值                                                                                                runat="server" />            
js 自制datalist选项列表出现后点击其他地方使其隐藏
Higashino_Keigo的博客
06-10 925
前提是这样的：先做了个form，再往里加几个input，input用div包裹，然后自己用css做了个datalist，因为datalist标签难以实现自动填充后缀。 后来发现无法在出现datalist后点击其他地方使其隐藏，故使用document.activeElement判断点击事件是否在datalist上，如果不是则隐藏datalist。 html 制作input代码如下（已省略cs...
H5 -input datalist属性
鹏仔的专栏
09-07 5491
最近一段时间，领导总是谈到一个话题，select的适用性问题。包含两点：数据大的时候实现搜索操作；多选问题（依然要用插件解决）。          H5目前主要应用在移动端，web由于浏览器太多，兼容很难，基本还是w3c的xhtml1.0。最近想到是否可以运用H5解决select的问题，尤其是搜索问题，测试代码见http://sandbox.runjs.cn/show/zgxmymgq ，当然，
帮我用vue和elementui checkbox全选多选请求接口
最新发布
05-25
好的，以下是一个简单的示例代码： ``` <template> <div> <el-checkbox v-model="checkAll" @change="handleCheckAll">{{ checkAll ? '取消全选' : '全选' }}</el-checkbox> <el-checkbox-group v-model="checkedList" @change="handleChecked">{{ item }}</el-checkbox-group> <el-button type="primary" @click="submit">提交</el-button> </div> </template> <script> export default { data() { return { checkAll: false, checkedList: [], dataList: [ { id: 1, name: '选项1' }, { id: 2, name: '选项2' }, { id: 3, name: '选项3' }, ], }; }, computed: { isIndeterminate() { return this.checkedList.length > 0 && this.checkedList.length < this.dataList.length; }, }, methods: { handleCheckAll(val) { this.checkedList = val ? this.dataList.map(item => item.id) : []; }, handleChecked(val) { const checkedCount = val.length; this.checkAll = checkedCount === this.dataList.length; }, submit() { // 请求接口，并将选中的数据传给后端 console.log(this.checkedList); }, }, }; </script> ``` 在这个示例中，我们使用了 `el-checkbox` 和 `el-checkbox-group` 组件来实现多选功能，使用 `el-button` 组件来触发提交操作。我们在 `data` 中定义了三个变量：`checkAll` 表示是否全选，`checkedList` 表示选中的数据列表，`dataList` 表示所有的数据列表。 在 `template` 中，我们使用 `v-model` 来绑定全选和选中的数据列表，并使用 `@change` 监听全选和选中的数据列表的变化。选项列表使用 `v-for` 进行循环渲染。 在 `methods` 中，我们定义了三个方法：`handleCheckAll`、`handleChecked` 和 `submit`。`handleCheckAll` 用于全选或取消全选操作，`handleChecked` 用于监听选中的数据列表的变化，并更新全选状态。`submit` 方法用于向后端提交选中的数据。 以上是一个简单的示例，你可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值