`

javascript 实现复选框全选和全不选

 
阅读更多
js:
function getChoose(){
   var v_all=document.getElementById("selectAll");
   var v_no=document.getElementById("selectNo");
   var chkBoxes = document.getElementsByName("bomId");
   if(v_all.checked){
      if(chkBoxes.length>0){
for(var i=0; i< chkBoxes.length; i++){
if(chkBoxes[i].type=="checkbox"){
  chkBoxes[i].checked=true;
}
}
      }
   }
   if(v_no.checked){
      v_all.checked=false;
      if(chkBoxes.length>0){
for(var i=0; i< chkBoxes.length; i++){
if(chkBoxes[i].type=="checkbox"){
  chkBoxes[i].checked=false;
}
}
      }
   } 
}
解释:selectAll、selectNo、bomId分别是复选框的id属性
<input type='checkbox' name='selectAll' id='selectAll' onclick="return getChoose();"/>全选
    <input type='checkbox' name='selectNo' id='selectNo' onclick="return getChoose();"/>全不选
下面的这个复选框是循环出来的,是有多个的
<input type='checkbox' name='bomId' id='bomId' value='${tmPart.tinventoryid }' />






分享到:
评论

相关推荐

    教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果

    本教程将深入讲解如何使用JavaScript实现复选框的全选和全不选功能,让您的网页交互体验更加友好。我们将探讨以下几个核心知识点: 1. **DOM操作**:JavaScript通过Document Object Model (DOM)来操作HTML元素。...

    复选框全选全不选JS代码

    本文将深入探讨“复选框全选全不选JS代码”的实现原理、应用场景以及如何优化这段代码,以便开发者能够更好地理解和运用到实际项目中。 ### 复选框全选与全不选的概念 复选框(Checkbox)是Web表单中常见的元素,...

    jquery 复选框 全选,全不选

    &lt;title&gt;jQuery 复选框全选全不选示例 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;input type="checkbox" id="selectAll"&gt; 全选 ...

    复选框全选与全不选操作实现思路

    在一些场景中,如数据管理、表单填写等,全选和全不选功能是非常实用的,它能方便用户快速选择或取消所有选项。本文将详细解析如何使用JavaScript实现复选框的全选与全不选操作。 首先,我们需要创建HTML结构,包含...

    JQ checkbox 全选和全不选

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

    JavaScript案例-js全选和全不选.zip

    全选和全不选的实现原理基于HTML中的复选框(checkbox)元素和JavaScript的DOM操作。首先,我们需要在HTML中设置一个主复选框,通常命名为"全选",以及多个子复选框,代表可选项目。当用户点击"全选"时,JavaScript...

    一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    在本篇中,我们将深入探讨如何使用jQuery...为了实现全选和全不选的功能,我们需要一个主复选框(通常标记为“全选”),以及一组相关的子复选框。例如: ```html &lt;input type="checkbox" id="selectAll"&gt; 全选 ...

    【JavaScript源代码】JavaScript实现复选框全选或全取消操作.docx

    在JavaScript中,实现复选框...这个例子展示了如何利用JavaScript动态地同步复选框的选中状态,实现全选和全取消的功能。在实际开发中,这样的交互能提高用户体验,特别是在用户需要快速选择或取消大量选项时。

    复选框、全选、全不选

    使用JavaScript编写复选框的全选和全不选功能。。。。

    复选框的全选全不选

    总的来说,通过JavaScript,我们可以轻松地为复选框列表添加全选和全不选功能,提高用户在网页交互中的便捷性。在实际开发中,还可以考虑优化代码,比如使用类库如jQuery简化DOM操作,或者使用现代JavaScript特性...

    多选框全选反选

    1. **目标**:通过JavaScript代码实现对一组复选框进行全选和全不选的操作。 2. **功能需求**: - 全选所有复选框。 - 反选(全不选)所有复选框。 3. **技术选型**:使用纯JavaScript实现。 #### 二、代码分析 ...

    js实现全选和全不选功能

    总结来说,JavaScript实现全选和全不选功能的关键在于监听全选复选框和待选复选框的点击事件,以及正确地更新和同步`checked`属性。通过这种方式,我们可以提供给用户方便快捷的批量操作选项,提升用户体验。

    jquery实现全选和全不选功能效果的实现代码【推荐】

    在Web开发中,全选和全不选功能是常见的一种用户交互形式,特别是在涉及多选列表或表格的情况下。在本篇文章中,将详细...文章提供的内容简洁明了,适合那些希望快速实现复选框全选和全不选功能的前端开发者参考使用。

    基于JavaScript实现复选框的全选和取消全选

    `allchk()`和`allUnchk()`函数分别用于全选和全取消所有复选框。这两个函数通过遍历`allWp`数组并改变每个复选框的`checked`属性来实现功能。 ```javascript function allchk(allWp) { for (var i = 0; i ; i++) {...

    JavaScript复选框相关函数

    总结,JavaScript复选框的相关函数涉及获取、设置状态、操作全选/全不选及事件处理等多个方面。理解并熟练运用这些函数,能帮助开发者创建更加动态和交互性强的Web页面。在实际应用中,我们还需要考虑兼容性、性能...

    select复选框带全选

    为了实现全选和全不选功能,我们需要添加额外的按钮和JavaScript代码。按钮可以是Bootstrap的`&lt;button&gt;`或`&lt;input type="checkbox"&gt;`,并在点击时触发相应的事件处理函数。这里我们使用`&lt;input type="checkbox"&gt;`...

    判断复选框的选择状态

    在IT界,尤其是在前端开发和用户界面设计中,"判断复选框的选择状态"是一个常见的需求,主要用于实现全选和全不选的功能。这个功能在各种列表或表格中广泛使用,比如在邮件客户端中选择多封邮件,或者在电商网站上...

    基于jquery实现复选框全选,反选,全不选等功能

    在这篇文章中,将介绍如何使用jQuery库来实现复选框的全选、反选和全不选功能。全选功能是将一组复选框都标记为选中状态;反选功能则是将已有选中的复选框取消选中,将没有选中的复选框设置为选中状态;全不选功能则...

    js实现全选和全不选

    在本文中,我们将深入探讨如何使用JavaScript实现全选和全不选的效果。 首先,我们需要一个HTML结构来包含我们的复选框。通常,我们会有一个主复选框(全选按钮)和多个子复选框。在这个例子中,我们创建了一个表格...

Global site tag (gtag.js) - Google Analytics