CSS Toggle Switch启用所有功能

Question

当我点击“启用全部”以打开所有拨动开关时，我想添加功能。我正在使用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>

Answer 1

此处：您可以将此代码添加到您的页面。

注意：以下代码将需要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"));


        });
    });