切换选中

比眉伴天荒 2022-09-10 04:20 201阅读 0赞

需求: 切换选中

  1. 1.1 点击全选按钮 将每一个复选框的状态都变成选中
  2. 1.2 点击不选按钮 将每一个复选框的状态都变成不选中
  3. 1.3 点击反选按钮 将选中的复选框变成不选中 将不选中的变成选中

代码实现:

// 1、获取元素

  1. var btns = document.getElementsByTagName('button');
  2. var inps = document.getElementsByTagName('input');
  3. console.log(btns, inps);
  4. // 2、点击事件 点击全选按钮
  5. btns\[0\].onclick = function () \{
  6. // 3、每一个复选框
  7. for (var i = 0; i < inps.length; i++) \{
  8. console.log(inps\[i\]);
  9. // 4、复选框的状态都变成选中
  10. inps\[i\].checked = true;
  11. \}
  12. \}
  13. // 2、点击事件 点击反选按钮
  14. btns\[1\].onclick = function () \{
  15. // 3、每一个复选框
  16. for (var i = 0; i < inps.length; i++) \{
  17. // 判断 如果是选中 就变为不选中 如果是不选中 就变为选中
  18. // if(inps\[i\].checked == true)\{
  19. // inps\[i\].checked = false;
  20. // \}else\{
  21. // inps\[i\].checked = true;
  22. // \}
  23. inps\[i\].checked = !inps\[i\].checked;
  24. \}
  25. \}
  26. // 2、点击事件 点击不选按钮
  27. btns\[2\].onclick = function () \{
  28. // 3、每一个复选框
  29. for (var i = 0; i < inps.length; i++) \{
  30. // 4、复选框的状态都变成不选中
  31. inps\[i\].checked = false;
  32. \}
  33. \}

发表评论

表情:
评论列表 (有 0 条评论,201人围观)

还没有评论,来说两句吧...

相关阅读

    相关 切换选中

     需求: 切换选中         1.1 点击全选按钮 将每一个复选框的状态都变成选中         1.2 点击不选按钮 将每一个复选框的状态都变成不选中