2つの同一のスイッチボタンを同じページで動作させる方法は？

Question

私は異なるIDを持つ2つのトグルボタンを持っていますが、私はそれらの両方の異なるクラスを設定しますが、一緒に動作します。そのうちの1つをクリックすると、2番目のものも動作します。おそらく、このような要素を独立/再利用可能にする方法がありますか？

jsbin

HTML：

<div id="switch-gender-1" > 
    <div class="switch-1" style="border-radius:25px;"> 
     <input type="radio" class="switch-input-1" name="view" value="male_1" id="male_1" checked> 
     <label for="male_1" class="switch-label-1 switch-label-off-1 male-1"> 
      <i class="fa fa-mars" aria-hidden="true"></i> 
      <label> 
       Homme 
      </label> 
     </label> 
     <input type="radio" class="switch-input-1" name="view" value="female_1" id="female_1"> 
     <label for="female_1" class="switch-label-1 switch-label-on-1 female-1"> 
      <label> 
       Femme 
      </label> <i class="fa fa-venus" aria-hidden="true"></i></label> 
     <span class="switch-selection-1"></span> 
    </div> 
</div> 

<div id="switch-gender-2" > 
    <div class="switch-2" style="border-radius:25px;"> 
     <input type="radio" class="switch-input-2" name="view" value="male_2" id="male_2" checked> 
     <label for="male_2" class="switch-label-2 switch-label-off-2 male"> 
      <i class="fa fa-mars" aria-hidden="true"></i> 
      <label> 
       Homme 
      </label> 
     </label> 
     <input type="radio" class="switch-input-2" name="view" value="female_2" id="female_2"> 
     <label for="female_2" class="switch-label-2 switch-label-on-2 female"> 
      <label> 
       Femme 
      </label> <i class="fa fa-venus" aria-hidden="true"></i></label> 
     <span class="switch-selection"></span> 
    </div> 
</div> 

サス：

#switch-gender-1{ 
    .switch-1 { 
    float: left; 
    position: relative; 
    height: 40px; 
    width: 161px; 
    background: #f6f6f6; 
    border-radius: 3px; 
    border: 2px solid #d1d1d1; 
    .switch-label-1{ 
     .fa { 
     font-size: 20px; 
     margin-top: 7px; 
     }&.male-1 { 
     float: left; 
     } 
     &.female-1 { 
     float: right; 
     } 
     &.male-1 .fa { 
     float: left; 
     margin-left: 12px; 
     color: #333333; 
     } 
     &.female-1 .fa { 
     float: right; 
     margin-right: 15px; 
     color: #333333; 
     } 
     &.male-1 label { 
     left: 37px; 
     top: -23px; 
     } 
     &.female-1 label { 
     right: 35px; 
     top: 4px; 
     } 

    } 

    } 
    .switch-label-1 { 
    position: relative; 
    z-index: 2; 
    float: left; 
    width: 58px; 
    line-height: 26px; 
    font-size: 11px; 
    color: rgba(255, 255, 255, 0.35); 
    text-align: center; 
    cursor: pointer; 
    & label { 
     display: none; 
     font-size: 14px; 
     position: relative; 
    } 
    &:active { 
     font-weight: bold; 
    } 
    } 

    .switch-label-off-1 { 
    padding-left: 2px; 
    } 
    .switch-input-1 { 
    display: none; 
    &:checked + .switch-label-1 { 
     font-weight: bold; 
     color: rgba(0, 0, 0, 0.65); 
     text-shadow: 0 1px rgba(255, 255, 255, 0.25); 
     -webkit-transition: 0.15s ease-out; 
     -moz-transition: 0.15s ease-out; 
     -ms-transition: 0.15s ease-out; 
     -o-transition: 0.15s ease-out; 
     transition: 0.15s ease-out; 
     -webkit-transition-property: color, text-shadow; 
     -moz-transition-property: color, text-shadow; 
     -ms-transition-property: color, text-shadow; 
     -o-transition-property: color, text-shadow; 
     transition-property: color, text-shadow; 
    } 
    &:checked + .switch-label-1 label { 
     display: block; 
    } 
    &:checked + .switch-label-on-1 ~ .switch-selection-1 { 
     left: 46px; 
     /* Note: left: 50%; doesn't transition in WebKit */ 
    } 
    &:checked + .switch-label-1.female-1 .fa { 
     position: relative; 
     top: -30px; 
    } 
    &:checked + .switch-label-1 .fa { 
     color: rgb(73, 200, 193); 
    } 
    } 

    .switch-selection-1 { 
    position: absolute; 
    z-index: 1; 
    top: -4px; 
    left: -3px; 
    display: block; 
    border: 1px solid #d1d1d1; 
    width: 113px; 
    height: 42px; 
    /* border-radius: 3px; */ 
    background-color: white; 
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); 
    -moz-transition: left 0.15s ease-out; 
    -ms-transition: left 0.15s ease-out; 
    -o-transition: left 0.15s ease-out; 
    transition: left 0.15s ease-out; 
    -webkit-box-shadow: 2px 6px 18px 0px rgba(0, 0, 0, 0.31); 
    -moz-box-shadow: 2px 6px 18px 0px rgba(0, 0, 0, 0.31); 
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.31); 
    border-radius: 25px; 
    } 

} 
/*--------------------------*/ 

#switch-gender-2{ 
    .switch-2 { 
    float: left; 
    position: relative; 
    height: 40px; 
    width: 161px; 
    background: #f6f6f6; 
    border-radius: 3px; 
    border: 2px solid #d1d1d1; 
    .switch-label-2{ 
     .fa { 
     font-size: 20px; 
     margin-top: 7px; 
     }&.male { 
     float: left; 
     } 
     &.female { 
     float: right; 
     } 
     &.male .fa { 
     float: left; 
     margin-left: 12px; 
     color: #333333; 
     } 
     &.female .fa { 
     float: right; 
     margin-right: 15px; 
     color: #333333; 
     } 
     &.male label { 
     left: 37px; 
     top: -23px; 
     } 
     &.female label { 
     right: 35px; 
     top: 4px; 
     } 

    } 

    } 
    .switch-label-2 { 
    position: relative; 
    z-index: 2; 
    float: left; 
    width: 58px; 
    line-height: 26px; 
    font-size: 11px; 
    color: rgba(255, 255, 255, 0.35); 
    text-align: center; 
    cursor: pointer; 
    & label { 
     display: none; 
     font-size: 14px; 
     position: relative; 
    } 
    &:active { 
     font-weight: bold; 
    } 
    } 

    .switch-label-off-2 { 
    padding-left: 2px; 
    } 
    .switch-input-2 { 
    display: none; 
    &:checked + .switch-label-2 { 
     font-weight: bold; 
     color: rgba(0, 0, 0, 0.65); 
     text-shadow: 0 1px rgba(255, 255, 255, 0.25); 
     -webkit-transition: 0.15s ease-out; 
     -moz-transition: 0.15s ease-out; 
     -ms-transition: 0.15s ease-out; 
     -o-transition: 0.15s ease-out; 
     transition: 0.15s ease-out; 
     -webkit-transition-property: color, text-shadow; 
     -moz-transition-property: color, text-shadow; 
     -ms-transition-property: color, text-shadow; 
     -o-transition-property: color, text-shadow; 
     transition-property: color, text-shadow; 
    } 
    &:checked + .switch-label-2 label { 
     display: block; 
    } 
    &:checked + .switch-label-on-2 ~ .switch-selection { 
     left: 46px; 
     /* Note: left: 50%; doesn't transition in WebKit */ 
    } 
    &:checked + .switch-label-2.female .fa { 
     position: relative; 
     top: -30px; 
    } 
    &:checked + .switch-label-2 .fa { 
     color: rgb(73, 200, 193); 
    } 
    } 

    .switch-selection { 
    position: absolute; 
    z-index: 1; 
    top: -4px; 
    left: -3px; 
    display: block; 
    border: 1px solid #d1d1d1; 
    width: 113px; 
    height: 42px; 
    /* border-radius: 3px; */ 
    background-color: white; 
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); 
    -moz-transition: left 0.15s ease-out; 
    -ms-transition: left 0.15s ease-out; 
    -o-transition: left 0.15s ease-out; 
    transition: left 0.15s ease-out; 
    -webkit-box-shadow: 2px 6px 18px 0px rgba(0, 0, 0, 0.31); 
    -moz-box-shadow: 2px 6px 18px 0px rgba(0, 0, 0, 0.31); 
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.31); 
    border-radius: 25px; 
    } 

} 

Answer 1

ラジオボタンは、名前入力のための単一の値を共有しました。あなたの2つの入力が同じ名前（別名「ビュー」）を共有するので、同じ値を共有します。

入力名には "view"と "view2"が必要です。