iT邦幫忙

0

jquery 問題求解

https://ithelp.ithome.com.tw/upload/images/20180802/20110132NiE6N9HztQ.jpg

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

<!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")

2 個回答

1
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搞熟吧。

tenno081 iT邦新手 5 級 ‧ 2018-08-02 22:06:41 檢舉

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

0
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會跟著變選擇狀態

我要發表回答

立即登入回答