jQuery（练习1爱好选择器，含原生对照）

原生

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>全选练习</title>
</head>
<body>
<form method="post" action="">
  你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  <br/>
  <input type="button" id="checkedAllBtn" value="全　选"/>
  <input type="button" id="checkedNoBtn" value="全不选"/>
  <input type="button" id="checkedRevBtn" value="反　选"/>
  <input type="button" id="sendBtn" value="提　交"/>
</form>
<script type="text/javascript">
  /*
   功能说明:
     1. 点击'全选': 选中所有爱好
     2. 点击'全不选': 所有爱好都不勾选
     3. 点击'反选': 改变所有爱好的勾选状态
     4. 点击'提交': 提示所有勾选的爱好
     5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
     6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
   技术点：
     1.DOM查询
     2.事件回调函数绑定
     3.checkbox操作
     4.事件回调函数中的this
     5.逻辑思维能力
   */

  window.onload = function () {

    var items = document.getElementsByName("items");

    //1.#checkedAllBtn
    var checkedAllBtn = document.getElementById("checkedAllBtn");
    checkedAllBtn.onclick = function () {
      setItemsChecked(true);
      checkedAllBox.checked = true;
    };

    //2.#checkedNoBtn
    var checkedNoBtn = document.getElementById("checkedNoBtn");
    checkedNoBtn.onclick = function () {
      setItemsChecked(false);
      checkedAllBox.checked = false;
    };
    //3.#checkedRevBtn
    var checkedRevBtn = document.getElementById("checkedRevBtn");
    checkedRevBtn.onclick = function () {
      setItemsChecked();
      //点满时将checkedAllBox.checked设置为true
      //统计当前items中被选中的个数
      checkedAllBox.checked = isAllChecked();
    };

    //4.#checkedAllBox
    var checkedAllBox = document.getElementById("checkedAllBox");
    checkedAllBox.onclick = function () {
      setItemsChecked(this.checked);
    };

    //5.#sendBtn
    var sendBtn = document.getElementById("sendBtn");
    sendBtn.onclick = function () {
      for (var i = 0; i < items.length; i++) {
        if (items[i].checked) {
          alert(items[i].value);
        }
      }
    };
    //6.items
    for (var i = 0; i < items.length; i++) {
      items[i].onclick = function () {
        //点满时将checkedAllBox.checked设置为true
        //统计当前items中被选中的个数
        checkedAllBox.checked = isAllChecked();
      }
    }

    function isAllChecked() {
      for (var j = 0; j < items.length; j++) {
        if (!items[j].checked)
          return false;
      }
      return true;
    }

    function setItemsChecked(checked) {//没选中的全部选中
      for (var i = 0; i < items.length; i++) {
        //checked不传参就是对应undefined
        items[i].checked = (checked == undefined) ? (!items[i].checked) : checked;
      }
    }
  }
</script>
</body>
</html>

jQuery

.checked 是js的写法

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>全选练习</title>
</head>
<body>

  <form>
    你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br/>
    <input type="button" id="checkedAllBtn" value="全　选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反　选"/>
    <input type="button" id="sendBtn" value="提　交"/>
  </form>

<script src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  /*
   功能说明:
   1. 点击'全选': 选中所有爱好
   2. 点击'全不选': 所有爱好都不勾选
   3. 点击'反选': 改变所有爱好的勾选状态
   4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
   5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
   6. 点击'提交': 提示所有勾选的爱好
   */
  $(function () {
    var $Items = $(':checkbox[name=items]')
    var $checkedAllBox = $('#checkedAllBox')

    // 1. 点击'全选': 选中所有爱好
    $('#checkedAllBtn').click(function () {
      $Items.prop('checked', true)
      $checkedAllBox.prop('checked', true)
    })

    // 2. 点击'全不选': 所有爱好都不勾选
    $('#checkedNoBtn').click(function () {
      $Items.prop('checked', false)
      $checkedAllBox.prop('checked', false)
    })

    // 3. 点击'反选': 改变所有爱好的勾选状态
    $('#checkedRevBtn').click(function () {
      $Items.each(function () {
        this.checked = !this.checked
      })
      $checkedAllBox.prop('checked', $Items.filter(':not(:checked)').size()===0)
    })

    // 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
    $checkedAllBox.click(function () {
      $Items.prop('checked', this.checked)
    })

    // 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
    $Items.click(function () {
      $checkedAllBox.prop('checked', $Items.filter(':not(:checked)').size()===0)
    })

    // 6. 点击'提交': 提示所有勾选的爱好
    $('#sendBtn').click(function () {
      $Items.filter(':checked').each(function () {
        alert(this.value)
      })
    })
  })
</script>
</body>

</html>

展示

posted on 2023-01-13 21:32 垂序葎草阅读(17) 评论(0) 编辑收藏举报

原生

jQuery

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

推荐排行榜