编程 Javascript

js实现(全选)多选按钮的方法【附实例】

Posted in Javascript onMarch 30, 2016

第一种，全部选中：

<html>
 <head>
   <title>复选框checked属性</title>
   <script language="JavaScript" type="text/javascript">
      function changeState(isChecked)
     {
       var chk_list=document.getElementsByTagName("input");
       for(var i=0;i<chk_list.length;i++)
        {
         if(chk_list[i].type=="checkbox")
          {
           chk_list[i].checked=isChecked;
          }
        }
    }
   </script>
 </head>
 <body>
   <h1>请选择你的爱好</h1>
   <form name="myForm1">
     <input type="checkbox" name="cb1" checked>看书<br>
     <input type="checkbox" name="cb2" checked>上网<br>
     <input type="checkbox" name="cb3">游戏<br>
   </form>
   <hr>
   <form name="myForm2">
     <input type="checkbox" name="cb" onclick="changeState(this.checked)">全选
   </form>
 </body>
</html>

效果如下：

第二种，选中指定的。

以上这篇js实现(全选)多选按钮的方法【附实例】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

js实现(全选)多选按钮的方法【附实例】

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery中eq和get的区别与使用方法

Apr 14 Javascript

Express作者TJ告别Node.js奔向Go

Jul 14 Javascript

JavaScript实现按照指定长度为数字前面补零输出的方法

Mar 19 Javascript

cocos2dx骨骼动画Armature源码剖析(三)

Sep 08 Javascript

使用jQuery在移动页面上添加按钮和给按钮添加图标

Dec 04 Javascript

jquery+ajax实现直接提交表单实例分析

Jun 17 Javascript

AngularJS入门教程之Scope(作用域)

Jul 27 Javascript

纯js和css完成贪吃蛇小游戏demo

Sep 01 Javascript

详解node.js平台下Express的session与cookie模块包的配置

Apr 26 Javascript

深入理解Webpack 中路径的配置

Jun 17 Javascript

聊聊鉴权那些事(推荐)

Aug 22 Javascript

vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例

Nov 20 Vue.js

用JS生成UUID的方法实例

Mar 30 #Javascript

如何通过js实现图片预览功能【附实例代码】

Mar 30 #Javascript

jquery $.trim()去除字符串空格的实现方法【附图例】

Mar 30 #Javascript

jquery实现简单的banner轮播效果【实例】

Mar 30 #Javascript

jquery实现一个简单的表单验证实例

Mar 30 #Javascript

js实现密码强度检测【附示例】

Mar 30 #Javascript

原生javascript实现的一个简单动画效果

Mar 30 #Javascript