关于表单元素[绑定单击事件]的案例分析

<body>
  <input type="text" / class="myname">
  <button class="change">变</button>
  <br />

  <input type="checkbox" class="chkAll" />全选

  <div class="list">
    <input type="checkbox" />写代码
    <input type="checkbox" />调bug
    <input type="checkbox" />写文档
  </div>
  <button class="getChioce">获取用户选择</button>

  <script>

    // 题目1.:点击变得时候,让123变成***,点击变 ***变成123

    // 1.先获取元素
    let myname = document.querySelector('.myname')
    let change = document.querySelector('.change')

    // 单击事件绑定 change
    change.addEventListener('click', function () {
      // 判断让点击变得时候,让123变成***,点击变 ***变成123 
      myname.type = myname.type === 'password' ? 'text' : 'password'
      //注意 后面'text' : 'password'的顺序不要写反了 否则无效
      // console.log(myname);
    })





    // 题目2.:想要选中全选后,其他的checkbox一起被选中

    // 1. 获取全选的元素
    // 2.获取div里所有的元素 ,此时需要用到for循环去做
    // 3.绑定单选事件,设置全选的元素被选中的状态
    // 4.for循环list里面的内容,让全选的元素被选中的状态=list里面的内容的被选中状态


    // // 先获取元素
    // let chkAll = document.querySelector('.chkAll') //选中的是类选择器需要在前面加.
    // let list = document.querySelectorAll('.list input')

    // // 绑定全选作为单击事件
    // chkAll.addEventListener('click', function () {
    //   // 选中全选作为被选中的状态,然后声明一个变量去接收结果
    //   let state = chkAll.checked
    //   console.log(state);

    //   // 循环遍历list里面的内容 让内容也等于全选作为被选中的状态
    //   for (let i = 0; i < list.length; i++) {
    //     // console.log(list[i]);
    //     list[i].checked = state
    //   }

    // })

题目1易错总结: myname.type = myname.type === 'password' ? 'text' : 'password', 在三元式判定的时候,容易把'text' : 'password'搞反

题目2易错总结:

1.let list = document.querySelectorAll('.list input') 是个数组,容易忽略后面querySelectorAll的All,

2.需要搞清楚被选中的状态是哪个,

3.需要分析清楚循环体里面的内容也是要和全选的被选中状态一直,所以也要.checked,

4.数组的话是需要用for去循环的 .

关于表单元素[绑定单击事件]的易错题案例分析

关于表单元素[绑定单击事件]的案例分析