zoukankan      html  css  js  c++  java
  • js进阶 9-16 如何实现多选框全选和取消

    js进阶 9-16 如何实现多选框全选和取消

    一、总结

    一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好。

    1、如何实现多选框全选和取消?

    选择取到每一个checkbox的值,然后赋值为true或者false就好。

    17         var arr=document.getElementsByName('check')
    18         // alert(arr.length)
    19         if (c) {
    20             for (var i = 0;i<arr.length;i++){
    21                 arr[i].checked=true;

    2、实现多选框全选和取消用到的是checkbox的哪个重要属性?

    checked

    二、js进阶 9-16 如何实现多选框全选和取消

    1、案例描述

    实现多选框全选和取消

    2、相关知识:单选和复选框

    通常使用input元素来创建单选和复选框,的属性和方法相同,两者属性和方法相同,具有input元素共有的其他属性和方法。

    属性
    • 属性:id/form/name/type/disabled.......
    • Checked 设置或返回 checkbox 是否应被选中
    • defaultChecked 返回 checked 属性的默认值。
    方法
    • click() 模拟在 checkbox 中的一次鼠标点击。
    • blur()、focus()

    3、代码

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>演示文档</title>
     6 </head>
     7 <body>
     8     <form action="#" method="post" name="form01">
     9         <p>选择课程:</p>
    10         <p>全选:<input type="checkbox" name="all" value="全选" onclick="checkAll(this.checked)"></p>
    11         <p><input type="checkbox" name="check" value="A" >HTML5
    12         <input type="checkbox" name="check" value="B">PHP
    13         <input type="checkbox" name="check" value="C">JAVA</p>
    14 </form>
    15 <script type="text/javascript">
    16     function checkAll(c){
    17         var arr=document.getElementsByName('check')
    18         // alert(arr.length)
    19         if (c) {
    20             for (var i = 0;i<arr.length;i++){
    21                 arr[i].checked=true;
    22             }
    23             }else{
    24                 for(var i=0;i<arr.length;i++){
    25                     arr[i].checked=false;
    26                 }
    27             }
    28         }
    29 
    30 </script>
    31 </body>
    32 </html>
     
     
  • 相关阅读:
    Rails组件逐个数:Rails Form helpers
    watirwebdriver常用方法
    Rails组件逐个数:Rails Form helpers(续)
    rails常用命令速查手册
    Rails new, build, create, save方法区别
    Ruby如何使用require从外部加载自定义类或模块
    升级Firefox8后watirwebdriver出现错误“unable to obtain stable firefox connection in 60 seconds”
    POJ2723Get Luffy Out(2sat)
    POJ3683Priest John's Busiest Day(2sat)
    UVA11374Airport Express(dijkstra)
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9174761.html
Copyright © 2011-2022 走看看