`

页面上checkbox的选择操作

    博客分类:
  • java
阅读更多
在页面上checkbox使用的比较频繁,一般数据的列表页都会涉及到checkbox的操作,一般的操作有:判读是否选中、判读是否多选等


var checkElement={};
//选中所有
//参数:对应的check组名称
checkElement.selectAllCheck=function(checkName){
var selecters=document.getElementsByName(checkName);
for (i=0; i<selecters.length; i++)
{
if (selecters[i].type == "checkbox")
{
       selecters[i].checked=true;
}
}
}
//删除所有选中的勾
//参数:对应的check组名称
checkElement.deleteAllCheck=function(checkName){
var selecters=document.getElementsByName(checkName);
for (i=0; i<selecters.length; i++)
{
if (selecters[i].type == "checkbox")
{
       selecters[i].checked=false;
}
}
}
//判断是否有选中的 true or false
//参数:对应的check组名称
checkElement.justifyChecked=function(checkName){
   var selecters=document.getElementsByName(checkName);
var flag = false;
for(i=0;i<selecters.length;i++)//先判断是否有选上的项
{
if (selecters[i].type == "checkbox" && selecters[i].checked==true)
{
flag = true;
break;
}
}
return flag;
}
//选择全选或者不选--这个全选框调用的方法,选中它页面的多选框都选中反之亦然
//参数:(全选框对象,tbodyID(table中的<tbody>的id),子checkbox名称也即是tbodyID中的checkbox)
checkElement.selectAllBox=function(checkBox,tbodyId,checkName){
var tbody = document.getElementById(tbodyId);
if(checkBox.checked==true){//当选中时,说明全选
this.selectAllCheck(checkName);
}else{//否则,全不选
this.deleteAllCheck(checkName);
}
}
//由单选框判断全选框状态--tbody中的checkbox调用的方法
//参数:对应的check组名称
checkElement.checkAllStatus=function(checkName){
var selecters=document.getElementsByName(checkName);
var flag = true;
//1.由单选框判断全选框状态
for(i=0;i<selecters.length;i++){
flag &= selecters[i].checked;
}
document.getElementsByName("selectCheck")[0].checked=flag;
return flag;
}
//判断是否有结果集
//参数:对应的check组名称
checkElement.checkHaveResult=function(checkName){
var v = '1';
var check = document.getElementsByName(checkName);
if(check==null || check.length==0){
v=0;
}
if(v=='0'){
alert("没有任何记录");
return false;
}
return true;
}

//判断是否有多选---一般修改时使用
//参数:对应的check组名称
checkElement.justifyCheckedMore=function(checkName){
var count=0;
   var selecters=document.getElementsByName(checkName);
var flag = false;
for(i=0;i<selecters.length;i++)//先判断是否有选上的项
{
if (selecters[i].type == "checkbox" && selecters[i].checked==true)
{
count++;
}
}
return count;
}
//获取一个打勾的框的value
//参数:对应的check组名称
checkElement.getCheckedValue=function(checkName){
var v=null;
   var selecters=document.getElementsByName(checkName);
var flag = false;
for(i=0;i<selecters.length;i++)//先判断是否有选上的项
{
if (selecters[i].type == "checkbox" && selecters[i].checked==true)
{
v = selecters[i].value;
}
}
return v;
}

//在checkName对应的check组中获取要修改的ID
//参数:对应的check组名称
checkElement.getModifyId=function(checkName){
var modifyId='';
var count =this.justifyCheckedMore(checkName);
if(count==0){
alert("请选择需要修改的记录信息!",msg_Type);
}else if(count>1){
alert("请选择一行记录进行修改!",msg_Type);
}else{
modifyId= this.getCheckedValue(checkName);
}
return modifyId;
}
//在checkName对应的check组中判断是否可以删除
//参数:对应的check组名称
checkElement.getDeleteFlag=function(checkName){
var deleteFlag='0';
var count =this.justifyCheckedMore(checkName);
if(count==0){
alert("请选择需要删除的记录信息!",msg_Type);
}else{
deleteFlag="1";
}
return deleteFlag;
}
//点击一行时行高亮
checkElement.trClick=function(obj){
//如果点击的是checkbox本身,则跳过点击行事件,以免事件重复执行,导致选不上的现象
if(event.srcElement.type=="checkbox"){
return;
}
var checkbox=$(obj).find("input:checkbox")[0];
if(checkbox.checked==true){
checkbox.checked=false;
}else{
checkbox.checked=true;
}
this.checkAllStatus(checkbox.name);
}
分享到:
评论

相关推荐

    js实现翻页后保持checkbox选中状态的实现方法

    项目中的分页使用真分页,每次...把选中的checkbox中的id,其中包括模块id,操作id,拼接成一个字符串,然后把字符串传递到action中。 每次调用此页面时,首选调用action中的选中的id字符串,然后根据在id字符串的基

    checkbox.js

    用javascript写的&lt;checkbox.js&gt;文件能方便地对页面的各组checkbox进行全选、全部不选等操作,还可以统计每组checkbox的选中个数等状态,使用起来也比较方便。

    基于js实现checkbox批量选中操作

    本文实例为大家分享了js实现checkbox批量选中的具体代码,供大家参考,具体内容如下 &lt;html &gt; &lt;head&gt; &lt;title&gt;checkbox全选&lt;/title&gt; &lt;meta http-equiv=Content-Type content=text/html...

    js 判断checkbox是否选中的操作方法

    核心提示: 大家在很多场合也许会遇到判断页面是否有元素选中,下面介绍的是利用js判断是否选中CheckBox的方法。 //第几个没有选 代码如下: &lt;input type=”checkbox” name=”checkbox1″ checked&gt; &lt;input ...

    jQuery遍历页面所有CheckBox查看是否被选中的方法

    主要介绍了jQuery遍历页面所有CheckBox查看是否被选中的方法,涉及jQuery链式操作及针对CheckBox的操作技巧,非常具有实用价值,需要的朋友可以参考下

    Javascript实现CheckBox的全选与取消全选的代码

    本文介绍的方法,触发条件独立,可以全选或取消全选指定 name 的 CheckBox , 同一页面可以有多组供全选的 CheckBox ,功能健全,通用性较强。 效果图:运行查看效果: 字母全选开关 a b c d e f g 数字...

    JQuery 设置checkbox值二次无效的解决方法

    首先必须清除checkbox的选中,因为是ajax的异步操作,是不刷新页面的,所以需要手段充值控件值,使得其为空,不影响下次的拿到数据显示。 言归正传,$(“#checkboxID”).attr(‘checked’, false);//设置checkbox为...

    checkbox设置复选框的只读效果不让用户勾选

    在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户”这个地方是可以进行勾选操作的”而不想让用户在此处勾选(比如在信息展示页面),这时候就需要...

    jQuery实现table表格checkbox全选的方法分析

    今天在页面中使用jQuery实现了全选框操作,如图: 具体的实现过程很简单: 第一步 设计一个简单的表格: 设置表格列标题,在列标题中的单选框为全选框; 设置表格题,表格题的单选框就是普通的单选框啦: ...

    原生js操作checkbox用document.getElementById实现

    1、页面加载成功后,点击选中或取消选中该checkbox,checkbox属性里的checked属性不会根据该checkbox是否选中而变化 2、checkbox里的onchange或onclick方法里用jquery的attr方法获取checked是看得到的checked属性的...

    JS实现checkbox互斥(单选)功能示例

    主要介绍了JS实现checkbox互斥(单选)功能,涉及JavaScript针对页面元素属性的判断及动态操作相关实现技巧,需要的朋友可以参考下

    js操作CheckBoxList实现全选/反选(在客服端完成)

    具体方法: 在页面中放入一个CheckBoxList控件,并添加几项,用来分析其产生的HTML代码,这样在使用js进行 动态控制时,将会非常清晰其测试代码如下所示: 代码如下: ”CheckBoxList1″runat u201dserver”...

    JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结

    一: DropDownList ——————————————————————————————- 在使用 JQuery 进行遍历操作时, $(“input”).each(function(i) { …… } 当操作对象的类型为 dropdownlist时:(备注:在fire...

    使用CheckBox的属性制作纯css动态导航栏

    前提:很多时候、我们的网页都需要一个垂直的导航栏、可以分类、有分类、自然就有展开、关闭的功能、你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked 属性、巧妙地制作导航栏 结果:...

    javascript实现点击商品列表checkbox实时统计金额的方法

    主要介绍了javascript实现点击商品列表checkbox实时统计金额的方法,涉及javascript鼠标事件及页面元素操作的相关技巧,需要的朋友可以参考下

    jQuery实现checkbox全选功能完整实例

    主要介绍了jQuery实现checkbox全选功能,结合完整实例形式分析了jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

    在ASP.NET 2.0中操作数据之五十:为GridView控件添加Checkbox

    比如,基于Web的邮箱客户端列出了一系列的邮件,及一列checkboxes,用户可选择任意封邮件并执行相同的操作,比如移动到另一个文件夹或将之删除。  在本教程,我们将探讨如何添加checkboxes列,以及发生页面回传后...

    天涯易栈VC++网页操作类

    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~以下为网页复选框(checkbox)~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ BOOL GetCheckboxChecked(int i);//检查复选框(checkbox)是否被选中(checked),1为选中,0为未选中 ...

Global site tag (gtag.js) - Google Analytics