无法使用js获取Toggle开关的值

Question

以下是我正在研究的我的小型项目。它有两个Toggle开关，根据OnClick Function显示是/否的开关状态。

我需要1.提醒相应的拨动开关的值2.在“状态”下的同一页中显示相同的值。

我已经插入console.log来检查我得到的输出。 仅第一个拨动开关值是和否都正确显示

请帮助我知道我在下面缺少的是我的HTML CSS代码

HTML：

 function loadNewPage() { $(document).ready(function() { $('.switch-input').on('change', function() { var isChecked = $(this).is(':checked'); var selectedData; var $switchLabel = $('.switch-label'); console.log('isChecked: ' + isChecked); if(isChecked) { selectedData = $switchLabel.attr('data-yes'); } else { selectedData = $switchLabel.attr('data-no'); } console.log('Selected data: ' + selectedData); }); }); } 

 body { line-height: 1.6em; } #box-table-a th { font-size: 15px; font-weight: normal; padding: 8px; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; } #box-table-a td { font-size: 15px;padding: 8px; background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; } #box-table-a tr:hover td { background: #d0dafd; color: #339; } #box-table-a { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; margin-top: 45px; margin-bottom: 45px; padding:100px 2%; width: 580px; text-align: center; border-collapse: collapse; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; } body {margin:0;background-size: 100% 100%;webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;padding:100px 2%;font:14px/24px 'Open Sans', Helvetica, Arial, sans-serif;color:#000;} #wrapper { width: 780px; background:#FFF; margin:0 auto; margin-top:50px;margin-bottom:50px;border:solid 0px #E7E7E7; border-top:5px solid #0088cc; border-bottom:5px solid #0088cc;border-radius:6px; box-shadow:0 0 3px rgba(0,0,0,0.9), inset 0 4px 0 #ededed } #bkgnd {width: 1080px; background:#3DFFA3;margin:0 auto;border:solid 0px #E7E7E7;border-top:5px solid #0088cc; ;border-bottom:5px solid #0088cc;border-radius:6px;box-shadow:0 0 3px rgba(0,0,0,0.9), inset 0 4px 0 #ededed;} h2 { padding:30px 20px; border-bottom:solid 1px #e0e0e0; margin-bottom:20px; text-align:center; font-family:'Open Sans', sans-serif;} span.class2 { color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20;} h2.class1 { color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20;} section { padding:0 20px 20px} h3{ font:300 22px/30px 'Open Sans', sans-serif; margin:0 0 10px 0; padding:0;font-size:18px; margin:20px 0 5px 0;} h3 span{color:#0088cc;} .switch { position: relative; display: block; vertical-align: top; width: 100px; height: 30px; padding: 3px; margin:0; background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px); background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px); border-radius: 18px; box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05); cursor: pointer; box-sizing:content-box; } .switch-input { position: absolute; top: 0; left: 0; opacity: 0; box-sizing:content-box; } .switch-label { position: relative; display: block; height: inherit; font-size: 10px; text-transform: uppercase; background: #eceeef; border-radius: inherit; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); box-sizing:content-box; } .switch-label:before, .switch-label:after { position: absolute; top: 50%; margin-top: -.5em; line-height: 1; -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit; box-sizing:content-box; } .switch-label:before { content: attr(data-no); right: 11px; color: #aaaaaa; text-shadow: 0 1px rgba(255, 255, 255, 0.5); } .switch-label:after { content: attr(data-yes); left: 11px; color: #FFFFFF; text-shadow: 0 1px rgba(0, 0, 0, 0.2); opacity: 0; } .switch-input:checked ~ .switch-label { background: #E1B42B; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2); } .switch-input:checked ~ .switch-label:before { opacity: 0; } .switch-input:checked ~ .switch-label:after { opacity: 1; } .switch-handle { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0); background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0); border-radius: 100%; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); } .switch-handle:before { content: ""; position: absolute; top: 50%; left: 50%; margin: -6px 0 0 -6px; width: 12px; height: 12px; background: linear-gradient(to bottom, #eeeeee, #FFFFFF); background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF); border-radius: 6px; box-shadow: inset 0 1px rgba(0, 0, 0, 0.02); } .switch-input:checked ~ .switch-handle { left: 74px; box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); } /* Switch Left Right ==========================*/ label { display:inline-block;} .switch-left-right .switch-label { overflow: hidden; } .switch-left-right .switch-label:before, .switch-left-right .switch-label:after { width: 20px; height: 20px; top: 4px; left: 0; right: 0; bottom: 0; padding: 11px 0 0 0; text-indent: -12px; border-radius: 20px; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1); } .switch-left-right .switch-label:before { background: #eceeef; text-align: left; padding-left: 80px; } .switch-left-right .switch-label:after { text-align: left; text-indent: 9px; background: #FF7F50; left: -100px; opacity: 1; width: 100%; } .switch-left-right .switch-input:checked ~ .switch-label:before { opacity: 1; left: 100px; } .switch-left-right .switch-input:checked ~ .switch-label:after { left: 0; } .switch-left-right .switch-input:checked ~ .switch-label { background: inherit; } /* Transition ============================================================ */ .switch-label, .switch-handle { transition: All 0.3s ease; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease; } 

 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div id="bkgnd"> <div id="wrapper"> <section> <center> <label><h3>Notification 1</h3> <label class="switch switch-left-right"> <input class="switch-input" id="switch-input1" type="checkbox" onclick="loadNewPage();"/> <span class="switch-label" id="switch-label1" data-yes="YES" data-no="NO"></span><span class="switch-handle"></span> </label> </label> <label><h3>Notification 2</h3> <label class="switch switch-left-right"> <input class="switch-input" id="switch-input2" type="checkbox" onclick="loadNewPage()";/> <span class="switch-label" id="switch-label2" data-yes="YES" data-no="NO"></span><span class="switch-handle"></span> </label> </label> </center> </section> <center> <table id="box-table-a"> <thead> <tr style="border-left: 4px solid #aabcfe; border-right: 4px solid #aabcfe;"> <th>Notification 1</th> <th>Notification 2</th> </tr> </thead> <tbody> <tr style="border-left: 4px solid #aabcfe; border-right: 4px solid #aabcfe;"> <td>NO</td> <td>NO</td> </tr> </tbody> </table> </center> </div> </div> </body> 

Answer 1

首先，我没有click附加函数click监听change事件的逻辑。

我已经删除了该代码，而在我的代码中，我只是在监听change函数。 同样对于switchLabel ，您正在使用.switch-label选择，这将同时选择两个标签。

为了选择被单击的输入框的标签，我使用了next属性。

要更改表内的状态，您可以使用e.target.id找出选择了哪个开关。 然后，您可以相应地更新表。

 $('.switch-input').on('change', function(e) { var isChecked = $(this).is(':checked'); var selectedData; var $switchLabel = $('this').next('span'); var statusTD; if(e.target.id === "switch-input1") { statusTD = $("#status-1"); } else { statusTD = $("#status-2"); } if (isChecked) { selectedData = $switchLabel.attr('data-yes'); statusTD.text("Yes"); } else { selectedData = $switchLabel.attr('data-no'); statusTD.text("No"); } }); 

 body { line-height: 1.6em; } #box-table-a th { font-size: 15px; font-weight: normal; padding: 8px; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; } #box-table-a td { font-size: 15px; padding: 8px; background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; } #box-table-a tr:hover td { background: #d0dafd; color: #339; } #box-table-a { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; margin-top: 45px; margin-bottom: 45px; padding: 100px 2%; width: 580px; text-align: center; border-collapse: collapse; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; } body { margin: 0; background-size: 100% 100%; webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; padding: 100px 2%; font: 14px/24px 'Open Sans', Helvetica, Arial, sans-serif; color: #000; } #wrapper { width: 780px; background: #FFF; margin: 0 auto; margin-top: 50px; margin-bottom: 50px; border: solid 0px #E7E7E7; border-top: 5px solid #0088cc; border-bottom: 5px solid #0088cc; border-radius: 6px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.9), inset 0 4px 0 #ededed } #bkgnd { width: 1080px; background: #3DFFA3; margin: 0 auto; border: solid 0px #E7E7E7; border-top: 5px solid #0088cc; ; border-bottom: 5px solid #0088cc; border-radius: 6px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.9), inset 0 4px 0 #ededed; } h2 { padding: 30px 20px; border-bottom: solid 1px #e0e0e0; margin-bottom: 20px; text-align: center; font-family: 'Open Sans', sans-serif; } span.class2 { color: #4C4C4C; font-weight: bold; font-family: Calibri; font-size: 20; } h2.class1 { color: #FF0000; font-weight: bold; font-family: Tahoma; font-size: 20; } section { padding: 0 20px 20px } h3 { font: 300 22px/30px 'Open Sans', sans-serif; margin: 0 0 10px 0; padding: 0; font-size: 18px; margin: 20px 0 5px 0; } h3 span { color: #0088cc; } .switch { position: relative; display: block; vertical-align: top; width: 100px; height: 30px; padding: 3px; margin: 0; background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px); background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px); border-radius: 18px; box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05); cursor: pointer; box-sizing: content-box; } .switch-input { position: absolute; top: 0; left: 0; opacity: 0; box-sizing: content-box; } .switch-label { position: relative; display: block; height: inherit; font-size: 10px; text-transform: uppercase; background: #eceeef; border-radius: inherit; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); box-sizing: content-box; } .switch-label:before, .switch-label:after { position: absolute; top: 50%; margin-top: -.5em; line-height: 1; -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit; box-sizing: content-box; } .switch-label:before { content: attr(data-no); right: 11px; color: #aaaaaa; text-shadow: 0 1px rgba(255, 255, 255, 0.5); } .switch-label:after { content: attr(data-yes); left: 11px; color: #FFFFFF; text-shadow: 0 1px rgba(0, 0, 0, 0.2); opacity: 0; } .switch-input:checked~.switch-label { background: #E1B42B; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2); } .switch-input:checked~.switch-label:before { opacity: 0; } .switch-input:checked~.switch-label:after { opacity: 1; } .switch-handle { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0); background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0); border-radius: 100%; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); } .switch-handle:before { content: ""; position: absolute; top: 50%; left: 50%; margin: -6px 0 0 -6px; width: 12px; height: 12px; background: linear-gradient(to bottom, #eeeeee, #FFFFFF); background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF); border-radius: 6px; box-shadow: inset 0 1px rgba(0, 0, 0, 0.02); } .switch-input:checked~.switch-handle { left: 74px; box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); } /* Switch Left Right ==========================*/ label { display: inline-block; } .switch-left-right .switch-label { overflow: hidden; } .switch-left-right .switch-label:before, .switch-left-right .switch-label:after { width: 20px; height: 20px; top: 4px; left: 0; right: 0; bottom: 0; padding: 11px 0 0 0; text-indent: -12px; border-radius: 20px; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1); } .switch-left-right .switch-label:before { background: #eceeef; text-align: left; padding-left: 80px; } .switch-left-right .switch-label:after { text-align: left; text-indent: 9px; background: #FF7F50; left: -100px; opacity: 1; width: 100%; } .switch-left-right .switch-input:checked~.switch-label:before { opacity: 1; left: 100px; } .switch-left-right .switch-input:checked~.switch-label:after { left: 0; } .switch-left-right .switch-input:checked~.switch-label { background: inherit; } /* Transition ============================================================ */ .switch-label, .switch-handle { transition: All 0.3s ease; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div id="bkgnd"> <div id="wrapper"> <section> <center> <label><h3>Notification 1</h3> <label class="switch switch-left-right"> <input class="switch-input" id="switch-input1" type="checkbox"/> <span class="switch-label" id="switch-label1" data-yes="YES" data-no="NO"></span><span class="switch-handle"></span> </label> </label> <label><h3>Notification 2</h3> <label class="switch switch-left-right"> <input class="switch-input" id="switch-input2" type="checkbox"/> <span class="switch-label" id="switch-label2" data-yes="YES" data-no="NO"></span><span class="switch-handle"></span> </label> </label> </center> </section> <center> <table id="box-table-a"> <thead> <tr style="border-left: 4px solid #aabcfe; border-right: 4px solid #aabcfe;"> <th>Notification 1</th> <th>Notification 2</th> </tr> </thead> <tbody> <tr style="border-left: 4px solid #aabcfe; border-right: 4px solid #aabcfe;"> <td id="status-1">No</td> <td id="status-2">No</td> </tr> </tbody> </table> </center> </div> </div> </body> 

Answer 2

尝试这个 ：

$(document).ready(function() {
  $('.switch-input').on('change', function() {
    var isChecked = $(this).is(':checked');
    console.log('Selected data: ' + (isChecked?'Yes':'NO'));
    $('td').eq($('.switch-input').index(this)).html((isChecked?'Yes':'NO'));
  })
})

 $(document).ready(function() { $('.switch-input').on('change', function() { var isChecked = $(this).is(':checked'); console.log('Selected data: ' + (isChecked?'Yes':'NO')); $('td').eq($('.switch-input').index(this)).html((isChecked?'Yes':'NO')); }) }); 

 body { line-height: 1.6em; } #box-table-a th { font-size: 15px; font-weight: normal; padding: 8px; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; } #box-table-a td { font-size: 15px;padding: 8px; background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; } #box-table-a tr:hover td { background: #d0dafd; color: #339; } #box-table-a { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; margin-top: 45px; margin-bottom: 45px; padding:100px 2%; width: 580px; text-align: center; border-collapse: collapse; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; } body {margin:0;background-size: 100% 100%;webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;padding:100px 2%;font:14px/24px 'Open Sans', Helvetica, Arial, sans-serif;color:#000;} #wrapper { width: 780px; background:#FFF; margin:0 auto; margin-top:50px;margin-bottom:50px;border:solid 0px #E7E7E7; border-top:5px solid #0088cc; border-bottom:5px solid #0088cc;border-radius:6px; box-shadow:0 0 3px rgba(0,0,0,0.9), inset 0 4px 0 #ededed } #bkgnd {width: 1080px; background:#3DFFA3;margin:0 auto;border:solid 0px #E7E7E7;border-top:5px solid #0088cc; ;border-bottom:5px solid #0088cc;border-radius:6px;box-shadow:0 0 3px rgba(0,0,0,0.9), inset 0 4px 0 #ededed;} h2 { padding:30px 20px; border-bottom:solid 1px #e0e0e0; margin-bottom:20px; text-align:center; font-family:'Open Sans', sans-serif;} span.class2 { color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20;} h2.class1 { color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20;} section { padding:0 20px 20px} h3{ font:300 22px/30px 'Open Sans', sans-serif; margin:0 0 10px 0; padding:0;font-size:18px; margin:20px 0 5px 0;} h3 span{color:#0088cc;} .switch { position: relative; display: block; vertical-align: top; width: 100px; height: 30px; padding: 3px; margin:0; background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px); background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px); border-radius: 18px; box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05); cursor: pointer; box-sizing:content-box; } .switch-input { position: absolute; top: 0; left: 0; opacity: 0; box-sizing:content-box; } .switch-label { position: relative; display: block; height: inherit; font-size: 10px; text-transform: uppercase; background: #eceeef; border-radius: inherit; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); box-sizing:content-box; } .switch-label:before, .switch-label:after { position: absolute; top: 50%; margin-top: -.5em; line-height: 1; -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit; box-sizing:content-box; } .switch-label:before { content: attr(data-no); right: 11px; color: #aaaaaa; text-shadow: 0 1px rgba(255, 255, 255, 0.5); } .switch-label:after { content: attr(data-yes); left: 11px; color: #FFFFFF; text-shadow: 0 1px rgba(0, 0, 0, 0.2); opacity: 0; } .switch-input:checked ~ .switch-label { background: #E1B42B; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2); } .switch-input:checked ~ .switch-label:before { opacity: 0; } .switch-input:checked ~ .switch-label:after { opacity: 1; } .switch-handle { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0); background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0); border-radius: 100%; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); } .switch-handle:before { content: ""; position: absolute; top: 50%; left: 50%; margin: -6px 0 0 -6px; width: 12px; height: 12px; background: linear-gradient(to bottom, #eeeeee, #FFFFFF); background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF); border-radius: 6px; box-shadow: inset 0 1px rgba(0, 0, 0, 0.02); } .switch-input:checked ~ .switch-handle { left: 74px; box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); } /* Switch Left Right ==========================*/ label { display:inline-block;} .switch-left-right .switch-label { overflow: hidden; } .switch-left-right .switch-label:before, .switch-left-right .switch-label:after { width: 20px; height: 20px; top: 4px; left: 0; right: 0; bottom: 0; padding: 11px 0 0 0; text-indent: -12px; border-radius: 20px; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1); } .switch-left-right .switch-label:before { background: #eceeef; text-align: left; padding-left: 80px; } .switch-left-right .switch-label:after { text-align: left; text-indent: 9px; background: #FF7F50; left: -100px; opacity: 1; width: 100%; } .switch-left-right .switch-input:checked ~ .switch-label:before { opacity: 1; left: 100px; } .switch-left-right .switch-input:checked ~ .switch-label:after { left: 0; } .switch-left-right .switch-input:checked ~ .switch-label { background: inherit; } /* Transition ============================================================ */ .switch-label, .switch-handle { transition: All 0.3s ease; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="bkgnd"> <div id="wrapper"> <section> <center> <label><h3>Notification 1</h3> <label class="switch switch-left-right"> <input class="switch-input" id="switch-input1" type="checkbox"> <span class="switch-label" id="switch-label1" data-yes="YES" data-no="NO"></span><span class="switch-handle"></span> </label> </label> <label><h3>Notification 2</h3> <label class="switch switch-left-right"> <input class="switch-input" id="switch-input2" type="checkbox"> <span class="switch-label" id="switch-label2" data-yes="YES" data-no="NO"></span><span class="switch-handle"></span> </label> </label> </center> </section> <center> <table id="box-table-a"> <thead> <tr style="border-left: 4px solid #aabcfe; border-right: 4px solid #aabcfe;"> <th>Notification 1</th> <th>Notification 2</th> </tr> </thead> <tbody> <tr style="border-left: 4px solid #aabcfe; border-right: 4px solid #aabcfe;"> <td>NO</td> <td>NO</td> </tr> </tbody> </table> </center> </div> </div> 

Answer 3

删除更改事件函数调用，您的函数应该是错误的

 $('.switch-input').on('change', function() {
          var isChecked = $(this).is(':checked');
          var selectedData;
          var $switchLabel = $('.switch-label');
          console.log('isChecked: ' + isChecked); 

          if(isChecked) {
            selectedData = $switchLabel.attr('data-yes');
          } else {
            selectedData = $switchLabel.attr('data-no');
          }
          console.log('Selected data: ' + selectedData);
});

请参阅演示