checkbox的标签和全选中问题

在JSP里,checkbox有几种表达方式,常见的两种主要有:

<input type="checkbox" name="Car" >

<form:checkbox path="allCheckFlg" id="allCheckFlg" value="${depsForm.allCheckFlg}"/>

其中<form:checkbox.../>标签来自于(org.springframework.web.servlet.tags.form.CheckboxTag)这个Spring标签库。

当Checkbox是选中状态的时候标签为<input type="checkbox" name="car" checked/>,

非选中的时候标签<input type="checkbox" name="car"/>

JS利用取得值得长度为空则为非选中,反之为选中。

但是如果使用Spring的标签库的话,例如<form:checkbox path="allCheckFlg" id="allCheckFlg" value="${depsForm.allCheckFlg}"/>,当checkbox为选中状态时候,value的值为true,非选中的时候为false。传到服务器端的这个结果可以直接用来判断,更方便。

另外还有许多个checkbox列表全选中checkbox的问题,首先,此列表中的每一个 checkbox当先选中“全选中”的时候,对应所有checkbox都选中,当先非选中“全选中”的时候,对应对应所有checkbox都不选中,反之亦然。即列表中的checkbox和全选中的checbox是要求对应的。当然,列表中checkbox的ID和Name属性要保持一致。

在没有用任何框架的情况下,最基础的方法是用javascript来实现,参照如下:<script language="javascript">

//选中全选按钮,下面的checkbox全部选中 
var selAll = document.getElementById("selAll"); 
function selectAll() 

  var obj = document.getElementsByName("checkAll"); 
  if(document.getElementById("selAll").checked == false) 
  { 
     for(var i=0; i<obj.length; i++) 
      { 
     obj[i].checked=false; 
      } 
  }else 
    { 
       for(var i=0; i<obj.length; i++) 
    {   
         obj[i].checked=true; 
  }
 }   
}

//当选中所有的时候,全选按钮会勾上 
function setSelectAll() 

  var obj=document.getElementsByName("checkAll"); 
  var count = obj.length; 
  var selectCount = 0;

for(var i = 0; i < count; i++) 
 { 
  if(obj[i].checked == true) 
     { 
        selectCount++;
     } 
 } 
if(count == selectCount) 
{
   document.all.selAll.checked = true; 

else 

   document.all.selAll.checked = false; 

}

//反选按钮 
function inverse() { 
var checkboxs=document.getElementsByName("checkAll"); 
for (var i=0;i<checkboxs.length;i++) { 
  var e=checkboxs[i]; 
  e.checked=!e.checked; 
  setSelectAll(); 

}

</script>

<html> 
<body> 
<center> 
<input type="checkbox" id="selAll" onclick="selectAll();" />全选 
<input type="checkbox" id="inverse" onclick="inverse();" />反选 
<div id="allcheck"> 
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>足球<br> 
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>篮球<br> 
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>跑步<br> 
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>登山<br> 
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>唱歌<br> 
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>跳舞<br> 
</div>
</center> 
</body> 
</html>

 

还有一种方法是用jQuery,代码量少一点。jQuery里面封装了大量的函数(也就是事件方法),就像Java的工具类一样,可以直接调用。例如,下面用到的jQueryObject.prop( propertyName [, value ] )

函数功能是设置或返回指定属性propertyName的值。如果指定了value参数,则表示设置属性propertyName的值为value;如果没有指定value参数,则表示返回属性propertyName的值。如果需要删除DOM元素的属性,请使用removeProp()函数。总之prop函数跟设置属性相关。可以利用工具手册找到自己需要的函数。

// 全选框

$(function() {

$("#allCheckFlg").click(function() {

$(‘input[id="checkItem"]‘).prop("checked", this.checked);

});

var $checkItem = $("input[id=‘checkItem‘]");

$checkItem

.click(function() {

$("#allCheckFlg")

.prop(

"checked",

// 如果id为checkItem的checbox的长度和id为checkItem的且选中状态下的checbox长度一样,则返回true,反之返回false

$checkItem.length == $("input[id=‘checkItem‘]:checked").length ? true : false);

});

});

.....................略........................

<div style="height:330px; width:1281px;" id="Detail">
  <table border="1" style="width:1280px;margin-left:20px;">
    <thead>
      <th style="background-color:#99C; width:60px; text-align:center;">
     <form:checkbox path="allCheckFlg" id="allCheckFlg" value="${depsForm.allCheckFlg}"/>全选中</th>
     <th style="background-color:#99C; width:60px; text-align:center;">序号</th>
     <th style="background-color:#99C; width:90px; text-align:center;">部门编码</th>
     <th style="background-color:#99C; width:120px; text-align:center;">部门名称</th>
     <th style="background-color:#99C; width:200px; text-align:center;">备注</th>
     <th style="background-color:#99C; width:60px; text-align:center;">停用Flg</th>
    </thead>
<tbody>
<c:forEach var="departmentInfo" items="${depsForm.departmentList}" varStatus="st">
     <tr>
       <td style="text-align: center;">
         <form:checkbox path="departmentList[${st.index}].checkItem" id="checkItem" value="${departmentInfo.checkItem}"></form:checkbox>
       </td>
       <td style="text-align: center;"><c:out value="${st.index+1 }"></c:out></td>
       <td style="text-align: center;"><c:out value="${departmentInfo.code }"></c:out></td>
       <td style="text-align: center;"><c:out value="${departmentInfo.name }"></c:out></td>
       <td style="text-align: center;"><c:out value="${departmentInfo.remark }"></c:out></td>
       <c:if test="${departmentInfo.disabledflg==1}">
         <td style="text-align: center;">
          <input type="checkbox" name="disabledflg" checked="checked" disabled="disabled" /></td>
        </c:if>
       <c:if test="${departmentInfo.disabledflg==0}">
          <td style="text-align: center;">
           <input type="checkbox" name="disabledflg" disabled="disabled" /></td>
        </c:if>

</tr>
  </c:forEach>
 </tbody>
 </table>
</div>

时间: 2024-10-17 19:47:50

checkbox的标签和全选中问题的相关文章

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

jquery checkbox的相关操作——全选.反选.获得所有选中的checkbox 1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2.取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']&

2016/3/30 租房子 ①建立租房子的增、删、改php页面 ②多条件查询 ③全选时 各部分全选中 任意checkbox不选中 全选checkbox不选中

字符串的另一种写法:<<<AAAA; 后两个AA回车要求定格  不然报错 例子: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <?php 9 $str = &

jquery checkbox radio 标签 选中的3种方法

张映 发表于 2013-07-16 分类目录: js/jquery jquery 很灵活,checkbox radio标签选中的方法有很多,在这儿就例举三个常用的方法. 一,测试html 查看复制打印? <div style="margin-top:150px;"> <input type='checkbox' name='test[]' class='checkbox' value='checkbox1'>checkbox1 <input type='c

Android开发CheckBox控件,全选,反选,取消全选

在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢 首先布局我们的界面: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_paren

jQuery实现的checkbox复选框全选和全不选效果

jQuery实现的checkbox复选框全选和全不选效果:复选框的全选和全不选效果在代码中非常的常用,尤其在批量处理的需求中更是如此,下面就通过一个代码实例简单介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

Django框架---jquery实现checkbox的单选和全选

jquery实现checkbox的单选和全选 一.思路 全选:判断“全选”checkbox的状态,如果选中则把tbody下所有的checkbox选中,反之 单选:主要是判断有没有全选,如果不是选中状态就把全选的checkbox状态设置为false,如果是选中就拿所有选中状态下“name=id”的chekbox和所有‘’name=id"的数量去比较,如果一样表示全选了,设置全选的chekbox为选中状态,反之. 二.代码 1.css部分,直接搬运的django项目里面的. <table bo

如何判断checkbox复选框是否选中

如何判断checkbox复选框是否选中:本章节介绍一下如何用jquery判断一个checkbox复选框是否被选中,方式有很多种,这里只是简单介绍一下比较常用的两种方式,不提供完整的代码,给出主要的代码片段.方式一: $("#ck").prop("checked")==true 关于prop()可以参阅jQuery的prop()方法一章节.方式二: $("#ck").is(":checked") :checked可以参阅jQue

一个checkbox 用jquery实现全选、全不选

之前因为一个很小的错误弄了很久,现在才做好. 效果图: 肯定还有更简单的方法. 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Checkbox.aspx.cs" Inherits="WebApp.Test.Checkbox" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http:

网页内容的html标签补全和过滤的两种方法

网页内容的html标签补全和过滤的两种方法: 如果你的网页内容的html标签显示不全,有些表格标签不完整而导致页面混乱,或者把你的内容之外的局部html页面给包含进去了,我们可以写个函数方法来补全html标签以及过滤掉无用的html标签. php使HTML标签自动补全,闭合,过滤函数方法一: 代码: function closetags($html) { preg_match_all('#<(?!meta|img|br|hr|input\b)\b([a-z]+)(?: .*)?(?<![/|/