如何通过jQuery获取多个复选框切换开关值

Question

我已经实现了基于我网站中复选框的切换开关。当我使用一个切换开关时，我可以获得我点击的复选框的值。但是当我实现两个或更多的切换开关时，我无法获得点击复选框的值。它总是返回第一个复选框的值。

你可以通过点击我在下面的小提琴上创建的第二个切换开关来理解我在说什么。

https://jsfiddle.net/wughm90b/2/

这是我的html代码：

<div class="switch" id="switch"> 
    <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox" checked data-value="one" > 
    <label for="cmn-toggle-1"></label> 
</div> 

<br> 

<div class="switch" id="switch"> 
    <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox" data-value="two"> 
    <label for="cmn-toggle-1"></label> 
</div> 

这是我的jQuery代码：

$(document).on("change", ".switch", function() { 
    alert($(this).find('input').data('value')); 
}); 

Answer 1

您有重复的ID为两个swtiches。请在下面找到

<div class="switch" id="switch"> 
    <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox" checked data-value="one" > 
    <label for="cmn-toggle-1"></label> 
</div> 

<br> 

<div class="switch" id="switch"> 
    <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round" type="checkbox" data-value="two"> 
    <label for="cmn-toggle-2"></label> 
</div> 

$(document).on("change", ".switch", function() { 
 
\t alert($(this).find('input').data('value')); 
 
});

/* ============================================================ 
 
    COMMON 
 
============================================================ */ 
 
#wrapper { 
 
    min-width: 600px; 
 
} 
 

 
.settings { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.settings .row { 
 
    display: table-row; 
 
} 
 
.settings .question, 
 
.settings .switch { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
} 
 
.settings .question { 
 
    width: 600px; 
 
    font-family: "Roboto Slab", serif; 
 
    font-size: 20px; 
 
} 
 

 
/* ============================================================ 
 
    COMMON 
 
============================================================ */ 
 
.cmn-toggle { 
 
    position: absolute; 
 
    margin-left: -9999px; 
 
    visibility: hidden; 
 
} 
 
.cmn-toggle + label { 
 
    display: block; 
 
    position: relative; 
 
    cursor: pointer; 
 
    outline: none; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
/* ============================================================ 
 
    SWITCH 1 - ROUND 
 
============================================================ */ 
 
input.cmn-toggle-round + label { 
 
    padding: 2px; 
 
    width: 120px; 
 
    height: 60px; 
 
    background-color: #dddddd; 
 
    -webkit-border-radius: 60px; 
 
    -moz-border-radius: 60px; 
 
    -ms-border-radius: 60px; 
 
    -o-border-radius: 60px; 
 
    border-radius: 60px; 
 
} 
 
input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after { 
 
    display: block; 
 
    position: absolute; 
 
    top: 1px; 
 
    left: 1px; 
 
    bottom: 1px; 
 
    content: ""; 
 
} 
 
input.cmn-toggle-round + label:before { 
 
    right: 1px; 
 
    background-color: #f1f1f1; 
 
    -webkit-border-radius: 60px; 
 
    -moz-border-radius: 60px; 
 
    -ms-border-radius: 60px; 
 
    -o-border-radius: 60px; 
 
    border-radius: 60px; 
 
    -webkit-transition: background 0.4s; 
 
    -moz-transition: background 0.4s; 
 
    -o-transition: background 0.4s; 
 
    transition: background 0.4s; 
 
} 
 
input.cmn-toggle-round + label:after { 
 
    width: 58px; 
 
    background-color: #fff; 
 
    -webkit-border-radius: 100%; 
 
    -moz-border-radius: 100%; 
 
    -ms-border-radius: 100%; 
 
    -o-border-radius: 100%; 
 
    border-radius: 100%; 
 
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
 
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
 
    -webkit-transition: margin 0.4s; 
 
    -moz-transition: margin 0.4s; 
 
    -o-transition: margin 0.4s; 
 
    transition: margin 0.4s; 
 
} 
 
input.cmn-toggle-round:checked + label:before { 
 
    background-color: #8ce196; 
 
} 
 
input.cmn-toggle-round:checked + label:after { 
 
    margin-left: 60px; 
 
} 
 

 
/* ============================================================ 
 
    SWITCH 2 - ROUND FLAT 
 
============================================================ */ 
 
input.cmn-toggle-round-flat + label { 
 
    padding: 2px; 
 
    width: 120px; 
 
    height: 60px; 
 
    background-color: #dddddd; 
 
    -webkit-border-radius: 60px; 
 
    -moz-border-radius: 60px; 
 
    -ms-border-radius: 60px; 
 
    -o-border-radius: 60px; 
 
    border-radius: 60px; 
 
    -webkit-transition: background 0.4s; 
 
    -moz-transition: background 0.4s; 
 
    -o-transition: background 0.4s; 
 
    transition: background 0.4s; 
 
} 
 
input.cmn-toggle-round-flat + label:before, input.cmn-toggle-round-flat + label:after { 
 
    display: block; 
 
    position: absolute; 
 
    content: ""; 
 
} 
 
input.cmn-toggle-round-flat + label:before { 
 
    top: 2px; 
 
    left: 2px; 
 
    bottom: 2px; 
 
    right: 2px; 
 
    background-color: #fff; 
 
    -webkit-border-radius: 60px; 
 
    -moz-border-radius: 60px; 
 
    -ms-border-radius: 60px; 
 
    -o-border-radius: 60px; 
 
    border-radius: 60px; 
 
    -webkit-transition: background 0.4s; 
 
    -moz-transition: background 0.4s; 
 
    -o-transition: background 0.4s; 
 
    transition: background 0.4s; 
 
} 
 
input.cmn-toggle-round-flat + label:after { 
 
    top: 4px; 
 
    left: 4px; 
 
    bottom: 4px; 
 
    width: 52px; 
 
    background-color: #dddddd; 
 
    -webkit-border-radius: 52px; 
 
    -moz-border-radius: 52px; 
 
    -ms-border-radius: 52px; 
 
    -o-border-radius: 52px; 
 
    border-radius: 52px; 
 
    -webkit-transition: margin 0.4s, background 0.4s; 
 
    -moz-transition: margin 0.4s, background 0.4s; 
 
    -o-transition: margin 0.4s, background 0.4s; 
 
    transition: margin 0.4s, background 0.4s; 
 
} 
 
input.cmn-toggle-round-flat:checked + label { 
 
    background-color: #8ce196; 
 
} 
 
input.cmn-toggle-round-flat:checked + label:after { 
 
    margin-left: 60px; 
 
    background-color: #8ce196; 
 
} 
 

 
/* ============================================================ 
 
    SWITCH 3 - YES NO 
 
============================================================ */ 
 
input.cmn-toggle-yes-no + label { 
 
    padding: 2px; 
 
    width: 120px; 
 
    height: 60px; 
 
} 
 
input.cmn-toggle-yes-no + label:before, input.cmn-toggle-yes-no + label:after { 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    color: #fff; 
 
    font-family: "Roboto Slab", serif; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    line-height: 60px; 
 
} 
 
input.cmn-toggle-yes-no + label:before { 
 
    background-color: #dddddd; 
 
    content: attr(data-off); 
 
    -webkit-transition: -webkit-transform 0.5s; 
 
    -moz-transition: -moz-transform 0.5s; 
 
    -o-transition: -o-transform 0.5s; 
 
    transition: transform 0.5s; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -ms-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 
input.cmn-toggle-yes-no + label:after { 
 
    background-color: #8ce196; 
 
    content: attr(data-on); 
 
    -webkit-transition: -webkit-transform 0.5s; 
 
    -moz-transition: -moz-transform 0.5s; 
 
    -o-transition: -o-transform 0.5s; 
 
    transition: transform 0.5s; 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -ms-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -ms-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 
input.cmn-toggle-yes-no:checked + label:before { 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -ms-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
} 
 
input.cmn-toggle-yes-no:checked + label:after { 
 
    -webkit-transform: rotateY(0); 
 
    -moz-transform: rotateY(0); 
 
    -ms-transform: rotateY(0); 
 
    -o-transform: rotateY(0); 
 
    transform: rotateY(0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="switch" id="switch"> 
 
    <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox" checked data-value="one" > 
 
    <label for="cmn-toggle-1"></label> 
 
</div> 
 

 
<br> 
 

 
<div class="switch" id="switch"> 
 
    <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round" type="checkbox" data-value="two"> 
 
    <label for="cmn-toggle-2"></label> 
 
</div>

给予必须是唯一的

Answer 2

ID名称更正后的代码。

请检查更新的JSFiddle。