JQuery 更改屬性 JQ對象循環 each 全選反選三元運算

時間 2019-12-06

原文原文鏈接

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>選項</th>
                <th>ip</th>
                <th>port</th>
            </tr>
        </thead>
        <tbody id="i1">
            <tr >
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
                    <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
                    <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="all" onclick="checkAll()">
    <input type="button" value="rev" onclick="reverse()">
    <input type="button" value="can" onclick="checkNone()">
</body>
<script src="jquery-3.2.1.js">
</script>
<script>
    function checkAll () {
        $('#i1 input').prop('checked', true)
//        $(':checkbox').prop('checked', true)
//        實際上, 這兩條都是同樣的.$帶出的JQuery對象只能是列表, 且是標籤列表.
    }
    function checkNone () {
        $('#i1 input').prop('checked',false)
    }
//    function reverse() {
//        $('#i1 input').each(function (k) {
//            console.log(k,this);
//        })
    function reverse() {
    $('#i1 input').each(function () {
        //三元運算, 實現反選, 選中的不選, 沒選的選中
        var v = (this).prop('checked')?false:true;
        $(this).prop('checked',v)
    })
    }
</script>
</html>

在反選裏面, 咱們不須要用到for循環, 而用封裝好的.each(function(k){})html

.each裏的函數的參數k, 其實是下標(索引序號)jquery

function reverse() {
        $('#i1 input').each(function (k) {
            console.log(k,this);
        })

輸出的結果包含:git

k : 0 1 2 3 github

this: 全部inputs裏面的每個須要循環的input子標籤, 而全部的this實際上都是DOM對象而不是JQ對象微信

若是要把this 轉爲JQ對象, 須要用$(this)包起來函數

三元運算:ui

var v = 條件? 真值:假值this

學術或足球分析交流微信:chinamaths(進討論組)

Don't hesitate to comment or add a like - Yours Bill
Bill's技術博客	足球分析博客	足彩數據視頻
比爾極客日誌_博客園	比爾足球數據_網易博客	足彩TV_優酷
比爾極客日誌_CSDN	比爾足球數據_新浪博客	足彩TV_搜狐視頻
比爾極客日誌_51CTO	比爾足球數據_新浪微博	足彩TV_喜馬拉雅
比爾極客日誌_開源中國	比爾足球數據_官方URL	足彩TV_56視頻
比爾極客日誌_GitHub	比爾足球數據_頭條號	微信號:zucai99