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

标签 javascript jquery html css toggle

下面是我正在处理的小元素。它有两个 Toggle 开关，根据 OnClick 函数显示开关的状态是/否。

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

我已插入 console.log 来检查我得到的输出。 只有第一个拨动开关值 yes 和 No 都正确显示

请帮助知道我错过了什么 下面是我的 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>

最佳答案

试试这个:

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

关于javascript - 无法使用js获取切换开关的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45458272/

上一篇：javascript - Firebase 函数 - 向旧值添加新值

下一篇：javascript - 从 $.load 获取的数组作为选择选项 Laravel Form

相关文章：

html - 列表不包含其 float 列表项

css - Div 共享总大小(不是百分比)

html - 使用fieldset标签有什么好处？

javascript - JavaScript 程序的执行时间

Javascript:调用阻塞 HTTP POST

javascript - 如何利用:visited on parent elements?

jquery - 无法解决 jquery IE 7/8 Script 3 Member not found 错误

javascript - Vue.js - 无法从方法访问计算属性

javascript - document.execCommand ('copy' ) 不起作用，即使创建了 DOM 元素

IE 中的 jQuery ajax 调用 - 编码

©2024 IT工具网  联系我们