javaweb-------------------jQuery選擇器練習（全選，反選）

阿新 • • 發佈：2021-01-18

技術標籤：筆記

練習：全選反選

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script type=" 
text/javascript">
        $(function () {

            //全選
            $("#checkedallbtn").click(function () {
                $(":checkbox").prop("checked",true)
            });

            // 全不選
            $("#checkednobtn").click(function () {
                $ 
(":checkbox").prop("checked",false)
            });

            //反選
            $("#checkedrevbtn").click(function () {
                $(":checkbox[name='items']").each(function () {
                        this.checked=!this.checked;
                });
                //反選同時檢查全選/全不選 

                var allcount=$(":checkbox[name='items']").length;
                var checkedcount=$(":checkbox[name='items']:checked").length;
                $("#checkedallbox").prop("checked",allcount==checkedcount);
            });
            //提交
            $("#commit").click(function () {
                //獲取選中的items
                $(":checkbox[name='items']:checked").each(function () {
                    alert(this.value);
                })
            })
            //全選/全不選
            $("#checkedallbox").click(function () {
                //在事件的function函式中，有一個this物件，這個物件是當前正在響應事件的dom物件
                $(":checkbox[name='items']").prop("checked",this.checked);
            })
            //球類不全選中 全選也應該不選中
            $(":checkbox[name='items']").click(function () {
                var allcount=$(":checkbox[name='items']").length;
                var checkedcount=$(":checkbox[name='items']:checked").length;
                $("#checkedallbox").prop("checked",allcount==checkedcount);
            })
        });
    </script>
</head>
<body>
    <form method="post" action="" >
        你愛好的運動是？ <input type="checkbox" id="checkedallbox"> 全選/全不選
        <br>
        <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>
        <br>
        <input type="button" id="checkedallbtn" value="全選">
        <input type="button" id="checkednobtn" value="全不選">
        <input type="button" id="checkedrevbtn" value="反選">
        <input type="button" id="commit" value="提交">
    </form>
</body>
</html>

在這裡插入圖片描述

id用#
類用.
表單標籤用：

javaweb-------------------jQuery選擇器練習（全選，反選）

技術標籤：筆記練習：全選反選 <!DOCTYPE html> <html lang="en"> <head>

jQuery 全選與全不選，反選

1.不帶選項框 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

javascript文字全選，反選，多選

1.首先還是要建立一個案例檔案 <div id=\"one\">請選擇愛好：<input type=\"checkbox\" id=\"check\">全選/全不選<br><input type=\"checkbox\" name=\"hobby\">英語<input type=\"c

全選，反選

1 　　　　//反選、計算 2function trCheck(id,name,obj){ 3if($(\"input[name=\'check\']\").length== $(\"input[name=\'check\']:checked\").length){

jQuery選擇器之基本選擇器（1）

jQuery選擇器之基本選擇器（1）基本選擇器主要有五種:分別為#id選擇器、.class選擇器、element選擇器、*選擇器和組合選擇器。

jQuery選擇器之層級選擇器（2）

jQuery選擇器之層級選擇器（2） jQuery的層級選擇器中主要包括四種，分別為後代選擇器、子元素選擇器、相鄰元素選擇器、之後的兄弟元素選擇器。

jQuery選擇器之基本過濾選擇器（3）

jQuery選擇器之基本過濾選擇器（3） jQuery的層級選擇器中主要包括：:first選擇器、:last選擇器、:not(selector)選擇器、:even選擇器、:odd選擇器、:eq選擇器、:lt(index)選擇器、:gl(index)選擇器、:header選擇器、

Jquery checkbox（全選/不全選、反選、單選、獲取選中的值）

技術標籤：Jqueryjquery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

jQuery 選擇器用法基礎入門示例

本文例項講述了jQuery 選擇器用法。分享給大家供大家參考，具體如下：今兒個開始學習jQuery，在學習jQuery之前我們應該掌握js，我之前也寫過幾篇筆記，但是隻是小部分的知識，js也不是很難可以自己簡單的看看。以後

jquery選擇器和屬性物件的操作例項分析

本文例項講述了jquery選擇器和屬性物件的操作。分享給大家供大家參考，具體如下：

jQuery 選擇器用法例項分析【prev + next】

本文例項講述了jQuery 選擇器用法。分享給大家供大家參考，具體如下： jQuery 選擇器 (prev + next)

JQuery選擇器

轉:菜鳥教程,JQuery選擇器 1.基本選擇器 $(\"#id\")//ID選擇器 $(\"div\")//元素選擇器 $(\".classname\")//類選擇器

Jquery 選擇器

1.基本選擇器　　選擇器　　　　　　描述　　　　　　　　　　　　　　　　　　　

jQuery 選擇器和事件

jQuery 選擇器和事件 1.jQuery的用處 jquery是一個簡潔而快速的 JavaScript 庫，可用於簡化事件處理，HTML 文件遍歷，Ajax 互動和動畫，以便快速開發網站

javascript: 一個可以代替jquery選擇器的方法

眾所周知，與原生js不同，jquery方法 $() 會得到一個jquery物件，而不是js物件。

解決element-ui日期選擇器顯示不全問題

技術標籤：elementuivue 如圖所示，在使用日期選擇器時，至字顯示不全此時在style中寫入以下程式碼

使用jQuery實現複選框的全選、反選和不選

技術標籤：jqueryjs 使用jQuery實現複選框的全選、反選和不選通過給按鈕繫結點選事件來控制

jQuery(二)——jQuery選擇器之表單物件過濾選擇器

技術標籤：JavaWeb過濾器jquerycheckboxcssjs 4. 表單物件過濾選擇器在開始之前，先介紹兩個屬性disabled屬性和multiple屬性，它們和checked屬性、selected屬性一樣： checked=“checked” 表示多選框或單選框中

7、jQuery選擇器及繫結方法

jQuery中的選擇器分類：基本選擇器id選擇器：語法： $(\"#id屬性值\") 通過id屬性值獲取元素類選擇器：語法： $(\".class屬性值\") 通過class屬性值獲取元素標籤選擇器：語法： $(\"標籤名\") 通過標籤名獲取

CSS選擇器和jQuery選擇器的區別與聯絡

到底什麼是選擇器？通過常接觸的CSS選擇器和jQuery選擇器理解一下，我們知道CSS是用於分離網頁的結構和表現的，也就是說對於一個網頁，HTML定義網頁的結構，CSS描述網頁的樣子，一個很經典的例子是說HTML就像一個人

javaweb-------------------jQuery選擇器練習（全選，反選）

相關推薦