Jquery CSS切换开关启用所有

Jquery CSS切换开关启用所有,jquery,html,css,Jquery,Html,Css,当我点击全部启用以打开全部切换开关时,我想添加一个功能。我用的是css3开关,现在我用开关打开或关闭开关 你们可以在图片上看到我想做什么 这是我的html <div class="box list"> <div class="title-holder"> <div class="title"> <h1>CPU Usage Cpu Usage</h1>

当我点击全部启用以打开全部切换开关时,我想添加一个功能。我用的是css3开关,现在我用开关打开或关闭开关

你们可以在图片上看到我想做什么

这是我的html

  <div class="box list">
        <div class="title-holder">
            <div class="title">
                <h1>CPU Usage Cpu Usage</h1>
            </div>
            <div class="switch" data-toggle="none">
                <span>Enable all</span>
                <input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-round" type="checkbox">
                <label for="cmn-toggle-7"></label>
            </div>
        </div>

        <div class="table-list">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>Server</th>
                    <th>Server</th>
                    <th>IP Address</th>
                    <th class="right">Action</th>
                </tr>
                </thead>
                <tbody>

                <tr>
                    <th>B124.LAX1</th>
                    <th>1021</th>
                    <th>66.55.88.132</th>
                    <th class="switcher">
                        <div class="switch">
                            <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round" type="checkbox">
                            <label for="cmn-toggle-2"></label>
                        </div>
                    </th>
                </tr>

                <tr>
                    <th>B124.LAX1</th>
                    <th>1021</th>
                    <th>66.55.88.132</th>
                    <th class="switcher">
                        <div class="switch">
                            <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round" type="checkbox">
                            <label for="cmn-toggle-2"></label>
                        </div>
                    </th>
                </tr>

                <tr>
                    <th>B124.LAX1</th>
                    <th>1021</th>
                    <th>66.55.88.132</th>
                    <th class="switcher">
                        <div class="switch">
                            <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round" type="checkbox">
                            <label for="cmn-toggle-2"></label>
                        </div>
                    </th>
                </tr>

                </tbody>
            </table>
        </div>

    </div>

CPU使用率CPU使用率
启用所有
服务器
服务器
IP地址
行动
B124.1
1021
66.55.88.132
B124.1
1021
66.55.88.132
B124.1
1021
66.55.88.132

此处:您可以将此代码添加到页面中

注意:以下代码需要JQuery

 $(function () {

        // attaches a function to be called when Header toggle is changed. 
        $('#cmn-toggle-7').change(function() {

            //sets the value of all other toggles to the value of header toggle
            $('.cmn-toggle:not(#cmn-toggle-7)').prop("checked", $(this).is(":checked"));


        });
    });

你还没有解释到目前为止你尝试了什么。我们需要查看您的代码才能找到答案。