`

JS控制checkbox

JavaScriptJ#CC++C# 
阅读更多
下面的有关实现chckbox全选的方法或多或少存在一些缺陷，具体的方法在另一个帖子中有详细的说明：
http://blog.csdn.net/luweifeng1983/archive/2008/12/18/3549769.aspx

<html>
<body>
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function checkAll() {
for (var j = 1; j <= 9; j++) {
box = eval("document.checkboxform.C" + j);
if (box.checked == false) box.checked = true;
}
}

function uncheckAll() {
for (var j = 1; j <= 9; j++) {
box = eval("document.checkboxform.C" + j);
if (box.checked == true) box.checked = false;
}
}

function switchAll() {
for (var j = 1; j <= 9; j++) {
box = eval("document.checkboxform.C" + j);
box.checked = !box.checked;
}
}
// End -->
</script>
<form name=checkboxform>
<input type=checkbox name=C1 checked>C1<br>
<input type=checkbox name=C2 checked>C2<br>
<input type=checkbox name=C3 checked>C3<br>
<input type=checkbox name=C4 checked>C4<br>
<input type=checkbox name=C5 checked>C5<br>
<input type=checkbox name=C6 checked>C6<br>
<input type=checkbox name=C7 checked>C7<br>
<input type=checkbox name=C8 checked>C8<br>
<input type=checkbox name=C9 unchecked>C9<br>
<br>
<input type=button value="全部选中" onClick="checkAll()"><br>
<input type=button value="全部不选" onClick="uncheckAll()"><br>
<input type=button value="选择转换" onClick="switchAll()"><br>
</form>

</body>
</html>

例二：
http://blog.csdn.net/powerlei/archive/2008/01/18/2052114.aspx
  1. 要实现的功能如图所示：
  5. 全选的checkbox的js代码如下：
  7. varstatus=true;
  8. functionallselect(){
  11. vartags=document.getElementsByTagName("input");
  12. for(i=0;i<tags.length;i++)
  13. {
  14. if(tags[i].type=="checkbox")
  15. {
  16. tags[i].checked=status;
  17. }
  18. }
  19. status=!status;
  21. }
  23. 当点击显示职位，申请选中职位，放入收藏夹时的js代码如下：
  25. functionpanduan(){
  26. vargou=0;
  27. vartags=document.getElementsByTagName("input");
  28. for(i=0;i<tags.length;i++)
  29. {
  30. if(tags[i].type=="checkbox")
  31. {
  32. if(tags[i].id!="Checkbox1"){//这里的Checkbox1为全选checkbox
  33. if(tags[i].checked==true){
  34. gou++;
  35. }
  36. }
  37. }
  38. }
  39. if(gou==0){
  40. window.alert("请要在选择的职位前打勾！");
  41. returnfalse;
  42. }
  44. }

例三：
  1. <HTML>
  2. <SCRIPTLANGUAGE="JavaScript">
  3. <!--
  4. functioncheckall(){
  5. //varhuang=document.all['huang'];
  6. varhuang=document.getElementsByTagName("input");
  8. for(i=0;i<huang.length;i++){
  9. if(huang[i].type=="checkbox")
  10. {
  11. huang[i].checked=true;
  12. }
  13. }
  14. }
  16. functioncenterall(){
  17. varhuang=document.all['huang'];
  18. for(i=0;i<huang.length;i++){
  19. huang[i].checked=false;
  20. }
  21. }
  22. //-->
  23. </SCRIPT>
  24. <BODY>
  25. <inputtype="checkbox"name="huang"value="ON">
  26. <inputtype="checkbox"name="huang"value="OFF">
  27. <br>
  28. <inputtype="button"value="checkall"onclick="checkall();">
  29. <inputtype="button"value="centerall"onclick="centerall();">
  30. </BODY>
  31. </HTML>
顺便看看getElementsByTagName的用法
  1. Javascript为我们提供了两种获取document引用的方式:getElementById和getElementsByTagName.前者返回一个指向具有指定Id属性的元素引用,而后者则返回具有该标签的元素数组,前者应用较多,也是比较熟悉的,本文针对后者做简要解释。
  2. 比方说:定义一个table,其中有多个td标签,现在需要更改第二个单元格的背景颜色,则可用getElementsByTagName.具体代码如下:
  3. ......
  4. <tablestyle="width:100%;">
  5. <tr><td>1</td>
  6. <td>2</td>
  7. <td>3</td>
  8. </tr>
  9. <tr>
  10. <td>4</td>
  11. <td>5</td>
  12. <td>6</td>
  13. </tr>
  14. <tr>
  15. <td>7</td>
  16. <td>8</td>
  17. <td>9</td>
  18. </tr>
  19. </table>
  20. ......
  21. vartdObject=document.getElementsByTagName("td").item(1);
  22. tdObject.style.backgroundColor="blue";
  23. ......


分享到：
| JSP与JS交互问题，值传递
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS控制checkboxJS控制checkboxJS控制checkbox

    通过以上介绍，你应该对如何使用JavaScript控制checkbox有了全面的理解。无论是单个操作还是批量处理，亦或是实现特定的交互逻辑，JavaScript都能满足你的需求。在实际项目中，结合CSS和HTML，你可以创建出丰富多样...

    今天把JS控制checkbox全选、取消全选、删除功能的代码贴出来。。。。。

    ### JS控制Checkbox全选、取消全选与删除功能 在前端开发中，处理表单数据时经常需要用到对多个复选框（checkbox）的操作，比如全选、取消全选以及基于选择状态进行某些操作（如删除）。本文将详细介绍如何通过...

    JS实现CheckBox复选框全选、不选或全不选功能

    CheckBox复选框JS实现全选、不选、全不选功能，很简单，具体内容如下 思路： 1、获取元素 2、给全选 不选 反选添加点击事件 3、用for循环checkbox 4、把checkbox的checked设置为true即实现全选 5、把checkbox的...

    js实现checkbox单选

    在ie\ff下测试过，都可以使用．实现单选，也可以取消选择

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

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

    用JS修改checkbox的选中状态

    在JavaScript（JS）中，操作HTML元素，包括修改checkbox（复选框）的选中状态，是前端开发中常见的任务。复选框是用户界面中一种允许用户进行多项选择的控件，其状态通常有两种：选中（checked）和未选中。在本文中...

    JS实现TreeView中Checkbox的控制

    `JS`（JavaScript）作为网页动态交互的主要语言，是实现`TreeView`中`Checkbox`功能的关键。本篇文章将深入探讨如何使用`JS`来实现`TreeView`中`Checkbox`的控制，包括点击父节点时全选子节点，以及点击子节点时保持...

    js 实现 使用checkbox控制文本框

    js 实现 使用checkbox控制文本框! 值得下载看看!资源免费,大家分享!!

    radiobutton 控制checkbox多选(js实现)

    ### radiobutton 控制 checkbox 多选 (js 实现) 在 Web 开发中，表单是与用户交互的重要组成部分。为了实现更加灵活的功能，有时我们需要利用 JavaScript 来控制表单元素的状态，例如通过单选按钮（`...

    js tree,checkbox tree

    4. **API操作**：jstree提供了一套完整的API接口，用于程序化地控制树的状态。比如，`get_checked`可以获取所有被选中的节点，`check_node`和`uncheck_node`则可以用来手动改变节点的选中状态。 5. **数据源**：js...

    样式控制checkbox

    当遇到 `checkbox` 不易被样式控制的情况时，我们可以采用JavaScript（JS）来模拟实现更丰富的视觉效果。以下将详细介绍如何使用JS和CSS来实现自定义的 `checkbox` 样式。 首先，我们需要理解原生 `checkbox` 的...

    checkbox.js

    而`checkbox.js`文件就是专门针对这种元素进行操作的一个JavaScript库，它提供了全选、全不选以及统计选中个数等功能，极大地提升了用户体验和开发效率。 一、Checkbox.js的核心功能 1. **全选与全不选**：`...

    CheckBox的优化.rar

    这里可能使用了伪类（如`:checked`）来控制Checkbox不同状态下的样式。 3. **images**：这个文件夹可能存储了用于Checkbox美化的一些图片资源。例如，可以为未选中和选中的状态提供不同的背景图像，或者用于自定义...

    checkbox多项选中及取消选中

    综上所述，实现 `checkbox` 的多项选中及取消选中，需要理解 `checkbox` 的基本用法，掌握JavaScript操作DOM属性的方法，理解 `attr` 与 `prop` 的区别，并灵活运用事件监听和样式控制。通过这些技术，你可以创建出...

    CheckBoxGroup.js:CheckBoxGroup JavaScript 类

    在JavaScript编程中，`CheckBoxGroup.js` 是一个用于管理复选框组的类，它提供了一种方便的方式来处理多个复选框之间的交互和数据管理。这个类通常用于创建用户界面，其中用户可以从多个选项中选择一个或多个。下面...

    js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析

    在网页开发中，有时我们需要对用户的选择行为进行控制，例如限制用户在一组复选框（checkbox）中只能选择一定数量的选项。本文将深入解析如何使用JavaScript实现这一功能，以及如何通过PHP获取用户在HTML表单中选择...

    jQuery操作checkbox并获取选中值

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。本文将详细讲解如何使用jQuery来操作...希望这个教程能帮助你更好地理解和运用jQuery来控制checkbox。

    js checkbox全选 反选 取消全部设置表单html复选框

    "js checkbox全选 反选 取消全部设置表单html复选框"这个标题描述了一个常见的功能需求，即通过JavaScript控制HTML中的复选框（checkboxes），实现全选、反选和取消全部选中的功能。在本文中，我们将深入探讨如何...

    JS checkbox控制操作代码

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 例二： 要实现的功能如图所示： 全选的checkbox的js代码如下： var status=true; function allselect(){ var tags=document.getElementsByTagName(“input”); for ...

    checkbox美化插件包

    6. **API接口**：icheck提供了一套简洁的API，使得在代码中动态控制checkbox和radio的状态变得简单。 7. **jQuery插件**：icheck基于jQuery构建，这使得它易于集成到现有的jQuery项目中，并且可以利用jQuery的便利...

Magicbox
Global site tag (gtag.js) - Google Analytics