`

JavaScript实现checkbox全选,当只有一个时不起作用的情况也已经解决

阅读更多
转载:http://hi.baidu.com/javajavajava/blog
<script language="JavaScript">
   function check(field) {
    var t = document.noticeForm.selectAll;
    if(!document.noticeForm.notice.length){ 
         if(t.checked){ 
             document.noticeForm.notice.checked=true; 
         } 
         else{ 
             document.noticeForm.notice.checked=false;   
         } 
         }
   
    if (t.checked) {
     for (i = 0; i <field.length; i++) {
      field[i].checked = true;
     }
    }
    else {
     for (i = 0; i <field.length; i++) {
      field[i].checked = false; 
     }
    }
   }
   function isSelect(confirmString){
    field = document.noticeForm.notice;
    var count = 0;
    if(!document.noticeForm.notice.length){ 
          if(document.noticeForm.notice.checked){ 
              count++; 
          } 
         }
    for (i = 0; i <field.length; i++) {
     if(field[i].checked == true){
      ++count;
     }
    }
    alert(count);
    if(count>0){
     return confirm(confirmString);
    } 
    else {
     alert('请至少选择一个!');
     return false;
    }
   }
  
</script>

<form action="${action}" name="noticeForm" onsubmit="return isSelect('${confirmString}');">
    <table border="1" width="95%" bordercolor="#8AB78A">
    <tr>
       <td align="center"><input type="checkbox" name="" onClick="check(this.form.notice)"/></td>
       <td align="center"><strong>状态</strong></td>
       <td align="center"><strong>标题</strong></td>
       <td align="center"><strong>作者</strong></td>
       <td align="center"><strong>发给谁?</strong></td>
       <td align="center"><strong>人气/回复</strong></td>
       <td align="center"><strong>发布时间</strong></td>
       <td align="center"><strong>最后修改</strong></td>
       <td align="center"><strong>审核</strong></td>
         </tr> 
    <c:forEach var="notice" items="${pageForm.list}" begin="${(pageForm.currentPage-1)*(pageForm.pageSize)}" end="${(pageForm.currentPage-1)*(pageForm.pageSize)+pageForm.pageSize-1}">
    <tr align="center">
       <td><input type="checkbox" name="notice" value="${notice.id}"/></td>
       <td><c:out value="${notice.statusString}"></c:out></td>
       <td>
        <a href="servlet/NoticeDetail?id=${notice.id}" title="${notice.title}">
        <c:out value="${notice.title}"></c:out>
        </a>
        <fmt:formatDate var="writeTime" value='${notice.writeTime}' type='both' pattern="yyyy-MM-dd"/>
        <jsp:useBean id="now" class="java.util.Date" /> 
     <fmt:formatDate var="today" value="${now}" type="both" pattern="yyyy-MM-dd" /> 
        <c:if test="${writeTime==today}">
         <img alt="新公告" src="images/new.gif">
        </c:if>
       </td>
       <td><c:out value="${notice.authorId}"></c:out></td>
       <c:set var="author" value="${notice.authorId}"></c:set>
       <td><c:out value="${notice.typeString}"></c:out>
       <c:out value="(${notice.recipients})"></c:out></td>
       <td><c:out value="${notice.readCount}"></c:out>/<c:out value="${notice.replyCount}"></c:out></td>
       <td>
       <fmt:formatDate value='${notice.writeTime}' type='both' pattern="yyyy-MM-dd HH:mm:ss"/>
       </td>
       <td>
        <fmt:formatDate value='${notice.lastModified}' type='both' pattern="yyyy-MM-dd HH:mm:ss"/>
       </td>
       <td>
        <c:out value="${notice.isAuditString}"></c:out>
       </td>
</tr>
              </c:forEach>
    </table>
    
    <input type="checkbox" name="selectAll" value="全选" onClick="check(this.form.notice)">全选
      <input type="image" src="images/delete.gif" style="cursor: hand;" alt="删除" >删除选定内容


分享到:
评论

相关推荐

    checkbox实现全选和反选经典例子

    综上所述,"checkbox实现全选和反选经典例子"是一个关于如何在Web应用中利用Checkbox控件提高用户交互性的实践教程。通过理解Checkbox的基本操作,结合服务器控件的事件处理和逻辑编程,我们可以创建出高效且易于...

    三种方式实现checkbox全选,反选

    以下是三种实现Checkbox全选和反选的方法,以及它们的JavaScript和Java实现细节。 ### 方法一:使用`checked`属性 **JavaScript实现**: 在JavaScript中,可以通过获取全选按钮的`checked`属性来控制所有复选框的...

    CheckBox全选并删除

    在ASP.NET开发中,CheckBox控件常常用于实现用户界面中的多选功能,而"CheckBox全选并删除"这个主题涉及到两个关键操作:全选和删除。全选功能允许用户一次性选择多个选项,删除则通常指的是从数据库或其他数据存储...

    javascript中CheckBox全选终极方案.docx

    通过上述介绍和代码示例,我们可以看到在ASP.NET中实现CheckBox全选功能并不复杂。只需正确编写JavaScript代码,并结合ASP.NET控件,即可轻松实现这一实用的功能。此外,还可以根据具体需求进行扩展,例如添加反选...

    checkbox的全选与取消

    全选功能通常是通过一个主复选框来实现的,当用户点击这个主复选框时,所有相关的子复选框会被自动选中或取消。这需要用到JavaScript或者jQuery来实现交互逻辑。例如,我们可以添加一个主复选框并监听其`change`事件...

    javascript获取checkbox选定的值,checkbox全选功能

    javascript获取checkbox选定的值,checkbox全选功能的一个例子,方便新手朋友下载使用。费了好大劲才把功能做全了。

    javascript实现全选全不选

    在JavaScript编程中,“全选”和“全不选”功能是常见的用户交互设计,尤其在数据列表或表格中,用户通常需要快速选择或取消选择所有项目。这些功能可以通过简单的JavaScript代码实现,通常与HTML的复选框(checkbox...

    easyui checkbox +全选

    标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框(checkbox)以及全选功能。EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列预定义的 CSS 样式和 JavaScript 组件,帮助...

    Js/Jquery 实现checkbox全选,反选,全不选

    为了实现全选、反选和全不选的功能,通常会添加一个主复选框,当点击这个主复选框时,所有关联的子复选框都会同步其选中状态。 一、全选功能 全选功能通常是通过一个名为“全选”的复选框触发,当这个复选框被选中...

    JQuery实现checkbox的全选取消全选

    在IT领域,特别是前端开发中,使用jQuery来操作DOM元素是一种常见的实践,特别是在处理复选框(checkbox)的全选与取消全选功能时。本文将深入解析如何使用jQuery实现这一功能,通过分析给定代码片段,提炼出关键...

    checkbox全选,选中数据传到后台

    在IT行业中,尤其是在Web开发领域,"checkbox全选,选中数据传到后台"是一个常见的功能需求。这个功能主要用于用户批量处理数据,如删除、修改等。以下是对这个主题的详细解析: 首先,我们需要理解标题中的关键词...

    JQ checkbox 全选和全不选

    "JQ checkbox 全选和全不选"这个主题聚焦于jQuery如何实现复选框的选择功能,特别是全选和全不选的交互效果。这种功能常见于数据表格或列表的筛选中,允许用户一次性选择或取消选择所有项目。 首先,我们需要了解...

    checkBox全选——jscheckBox全选——jscheckBox全选——js

    在JavaScript(JS)中,`checkBox`,也称为复选框,是网页表单中常见的一种元素,用于用户选择一个或多个选项。全选功能在处理多选项时非常实用,比如在一个列表中批量选择所有项目。这个标题和描述虽然重复,但明显...

    Javascript实现全选反选

    下面将详细介绍如何使用JavaScript来实现这个功能,以及与之相关的事件绑定。 一、全选/反选的基本原理 全选反选的核心思想是通过更改一个主复选框的状态(通常被称为“全选”按钮)来同步所有子复选框的状态。当...

    实现checkbox全选

    本示例“实现checkbox全选”关注的是如何为一组`checkbox`添加全选(check all)的功能。这种功能允许用户通过点击一个主`checkbox`来勾选或取消所有其他`checkbox`,极大地提高了用户的操作效率。 首先,我们需要...

    实现checkbox全选、反选、取消JavaScript小脚本异常

    在前端开发中,checkbox全选、反选、取消的操作是常见的功能需求,通常用于实现批量操作。在此过程中,开发者可能会遇到一些问题,例如页面在执行这些操作时出现异常。这里会详细探讨相关知识点,包括checkbox的基本...

    jquery、js操作checkbox全选反选.docx

    ### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中,Checkbox(复选框)是一种非常常见的用户界面元素,用于收集用户的多选输入。尤其是在表单设计时,Checkbox的全选与反选功能极大地方便了...

    jquery Checkbox 全选 反选 全不选 多种实现方法

    在涉及到表单元素如复选框(Checkbox)时,经常需要实现全选、反选和全不选的功能。下面将详细探讨 jQuery 如何实现这些功能,以及如何进行表单验证。 1. **全选功能** 要实现全选功能,首先我们需要一个主复选框...

    checkbox的几种全选方法

    本文将详细介绍几种实现Checkbox全选的方法。 #### 方法一:通过事件监听实现全选 这种方法通过JavaScript来实现,当全选按钮被点击时,遍历具有相同名称的所有Checkbox,并根据全选按钮的状态来设置它们的选中...

    checkbox全选功能实例

    首先,`checkbox`全选功能的核心在于实现一个主`checkbox`(通常命名为“全选”或“全选/全不选”),当用户点击这个主`checkbox`时,所有子`checkbox`的状态都会随之改变。这种功能在表格、列表和其他需要多选操作...

Global site tag (gtag.js) - Google Analytics