如何通過jQuery獲取多個複選框切換開關值

我已經實現了基於我網站中複選框的切換開關。當我使用一個切換開關時，我可以獲得我點擊的複選框的值。但是當我實現兩個或更多的切換開關時，我無法獲得點擊複選框的值。它總是返回第一個複選框的值。如何通過jQuery獲取多個複選框切換開關值

你可以通過點擊我在下面的小提琴上創建的第二個切換開關來理解我在說什麼。

這是我的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')); 
});

來源

2016-08-18 Thanoo

ID不能相同的兩個div –

@akshay不，這不是問題。問題是我爲兩個輸入標籤使用相同的ID。那就是問題所在。謝謝 – Thanoo

您有重複的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>

給予必須是唯一的

來源

2016-08-18 06:30:39 z0mBi3

謝謝..我在做這個編碼的時候並不酷。這就是爲什麼我無法找出這個小問題。再次感謝 – Thanoo

ID名稱更正後的代碼。

請檢查更新的JSFiddle。

來源

2016-08-18 06:30:47

如何通過jQuery獲取多個複選框切換開關值

回答

相關問題