複数のチェックボックストグルスイッチの値は、j​​queryで変更イベントが発生したときに値を返します

Question

私のウェブサイトのチェックボックスに基づいてトグルスイッチを実装しました。 1つのトグルスイッチを使用すると、クリックしたチェックボックスの値を取得できます。しかし、私は2つ以上のトグルスイッチを実装するとき、私はクリックするチェックボックスの値を得ることができません。常に最初のチェックボックスの値を返します。

次のようなフィドルで作成した2番目の切り替えスイッチをクリックすると、私は何を言っているのか理解できます。

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

次の2つのswtichesのIDを重複しています。一意である必要があります与えられた

<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をご確認ください。