jQueryはすべての選択と逆選択操作ケースを実装します

この記事では、全選択と逆選択操作を実装するためのjQueryの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

すべて選択 + 選択解除

コンソールに基づいて結果を表示できます

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>フィルターセレクター</title>
    <script src="jquery-3.2.1.min.js"></script>
</head>

<本文>

    <表の境界線="1">
        <tr>
            <td><入力タイプ="チェックボックス" 値="1"></td>
            <td>ジャガーノート</td>
            <td>450</td>
        </tr>
        <tr>
            <td><入力タイプ="チェックボックス" 値="2"></td>
            <td>剣士</td>
            <td>6300</td>
        </tr>
        <tr>
            <td><入力タイプ="チェックボックス" 値="3"></td>
            <td>ソードプリンセス</td>
            <td>6300</td>
        </tr>
        <tr>
            <td><入力タイプ="チェックボックス" 値="4"></td>
            <td>剣鬼</td>
            <td>6300</td>
        </tr>
    </テーブル>
 
    <input type="button" value="最初のものを選択するにはクリックしてください" id="firstBtn">
    <input type="button" value="最後のものを選択するにはクリックしてください" id="lastBtn">
    <input type="button" value="一括削除の場合はすべて選択" id="allBtn">
    <input type="button" value="選択項目を表示" id="checkBtn">
    <input type="button" value="チェックなしを表示" id="nocheckBtn">
    <input type="button" value="反転" id="overBtn">
    <input type="button" value="逆選択のアップグレード版" id="overBtn1">

<スクリプト>

        $(関数() {
            //jQuery はフィルター セレクターを使用して奇数と偶数の色の変更を実現します $("table tr:even").css('background-color','pink');
            $("テーブル tr:odd").css('background-color','blue');
            // 
            
            // 最初の $("#firstBtn").click(function() { を取得します。
                var first = $("テーブル tr:first").html();
                console.log(最初);  
            })

             // 最後の $("#lastBtn") を取得します。click(function() {
                var last = $("テーブル tr:last").text();
                コンソールログ(最後);  
            })
            // すべて選択---- 一括削除に使用$("#allBtn").click(function() { 
                // アイデア: すべてのチェックボックス td を検索し、トラバースして選択します $.each($("table tr td>input"), function(index, value) {
                  // コンソール.log(インデックス);   
                  // console.log(値);
                    console.log($(this).val()); // 値を走査します $(this).prop('checked',true); // すべてを選択します})

            }) 
            // クリックして選択したものを表示します $("#checkBtn").click(function() { 
                // フィルターセレクターを使用して選択します:
                $("テーブル tr td>入力:チェック済み")
                $.each($("table tr td>input:checked"), function(index, value) {
                    
                    console.log($(this).val()); // 値を走査する})
            
            }) 
            // クリックしてチェックされていない部分を表示します $("#nocheckBtn").click(function() { 
                console.log($("テーブル tr td>入力:not(:checked)"))
            })
            // 選択を反転$("#overBtn").click(function() { 
                $.each($("table tr td>input"), 関数(インデックス, 値) {
                    var istrue =$(this).prop("チェック済み");
                    //console.log(value.checked = !value.checked); // 値を走査する if(istrue){
                        $(this).prop("チェック済み",false);
                   } それ以外{
                    $(this).prop("チェック済み",true);
                   }
                })   
            })     
            // フル/逆選択のアップグレード版 $("#overBtn1").click(function() { 
                $.each($("table tr td>input"), 関数(インデックス, 値){
                $(this).prop("チェック済み",!$(this).prop("チェック済み"))
                })
            })
    })  
</スクリプト>

</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: