jquery 問題求解

jquery

tenno081 2018-08-02 18:30:13 ‧ 1860 瀏覽

分享至

這是我的介面，主要點選勾選全部的話下面的也會一起打勾，以下是我的程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script>
        function CheckAll_click() {
           // var check = $('#CheckAll').prop("checked");
           // $('#CheckBoxGroup input').prop("checked", check);
            $('#CheckBoxGroup input').prop("checked", $('#CheckAll').prop("checked"));
        }

        $(function () {
            $('#CheckAll').click(CheckAll_click);
        });

        //$(function () {
        //    $("#CheckAll").click(
        //        function () {
        //            var check = $('#CheckAll').prop("checked");
        //            $('#CheckBoxGroup input').prop("checked", check);
        //        });    
        //});
     
    </script>
</head>
<body class="">
    <div class="row" style="margin:10px">
        <div class="col-12">
            <input id="CheckAll" type="checkbox" />勾選全部
            <div id="CheckBoxGroup">
                <input type="checkbox" />項目1
                <input type="checkbox" />項目2
                <input type="checkbox" />項目3
                <input type="checkbox" />項目4
                <input type="checkbox" />項目5
                <input type="checkbox" />項目6
                <input type="checkbox" />項目7
                <input type="checkbox" />項目8
            </div>
        </div>
    </div>
</body>
</html>

我想請問是關於這部分

 $('#CheckBoxGroup input').prop("checked", $('#CheckAll').prop("checked"));

為什麼CheckBoxGroup後面要加input，我只知道CheckBoxGroup是我的ID，然後後面的這段我只知道第一個checked是屬性，在後面的我就不清楚了，希望各位能為我解答，謝謝。

$('#CheckAll').prop("checked")

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

froce

iT邦大師 1 級 ‧ 2018-08-02 20:44:39

最佳解答

給你魚吃不如教你釣魚：
1.css selector:
http://www.w3school.com.cn/cssref/css_selectors.asp

2.JQ的取值方式是「屬性(項目)」、賦值方式都是「屬性(項目, 新值)」

$('#CheckBoxGroup input').prop("checked", $('#CheckAll').prop("checked"));

// 把他拆開來看，等於下面的code
// 先對 $('#CheckAll') 取checked的狀態
var status = $('#CheckAll').prop("checked");
// 把status 賦給 $('#CheckBoxGroup input')
$('#CheckBoxGroup input').prop("checked", status)

這樣拆開有沒有比較清楚？
也就是先取$('#CheckAll')裡面checked的狀態，然後把他賦值到$('#CheckBoxGroup input')的checked狀態。

css selector不熟的話，基本上你沒辦法寫jQuery，先把selector搞熟吧。

回應 1
分享
檢舉

tenno081 iT邦研究生 4 級 ‧ 2018-08-02 22:06:41 檢舉

太感謝了，今我們才剛教這個，只是我們老師在講這段時我聽得不是很懂
您的寫法剛好我把他註解掉，然後我也有去w3school看過，但他是的與法介紹方面value那邊我不是很懂，現在終於懂了，萬分感謝

登入發表回應

Homura

iT邦高手 1 級 ‧ 2018-08-02 19:42:56

$('#CheckBoxGroup input').prop("checked", $('#CheckAll').prop("checked"));
為什麼CheckBoxGroup後面要加input，我只知道CheckBoxGroup是我的ID，

這段是指CheckboxGroup裡面的所有input元素
你也可以寫成$('#CheckBoxGroup>input')
意思是一樣的，我是覺得這樣比較清楚一點

然後後面的這段我只知道第一個checked是屬性，在後面的我就不清楚了

$(selector).prop(property,value)
是修改屬性用的方法
$('#CheckAll').prop("checked")
這段如果CheckAll是checked狀態時會回傳true
所以你這整段做的就是，當#CheckAll有選擇時，#CheckBoxGroup裡面input會跟著變選擇狀態