Question

下面是我正在处理的小项目。它有两个切换开关，根据OnClick功能显示切换状态是否为/是。

我需要 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然后监听change事件的逻辑。

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

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

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

＆＃13;

$('.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");
  }
  
  
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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'));
  })
})

＆＃13;

$(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'));
  })
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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);
});

参考DEMO

无法使用js获取切换开关的值

3 个答案: