ラベルにアクティブなクラスがあるときにラジオを選択する方法

Question

自分のボートを作成するためにいくつかのオプションを選択できるウェブサイトを作っています。ラベルの背後に隠れているラジオボタンを選択する必要があるので、それらを選択するために、私はその正確なことを行ういくつかのJSを書いています。

ここには、特定の問題を含む少量のコードがあります（このコードはウェブサイト全体で使用されています）。

<div class="row specs"> 
    <div class="subtitle">Hull Colour</div> 
    <div class="fourcol"> 
     <label class="item" id="white"> 
      <img src="images/8meter-outboard.jpg"> 
      <div class="price">Orange</div> 
      <input class="form-input" data-color="white" name="color" type="radio" value="white" id="white_radio" /> 
     </label> 
    </div> 

    <div class="fourcol"> 
     <label class="item" id="Test"> 
      <img src="images/8meter-outboard.jpg"> 
      <div class="price">Grey</div> 
      <input data-color="grey" name="color" type="radio" value="Test"> 
     </label> 
    </div> 

    <div class="fourcol last"> 
     <label class="item" id="orange"> 
      <img src="images/8meter-outboard.jpg"> 
      <div class="price">White</div> 
      <input data-color="orange" name="color" type="radio" value="orange"> 
     </label> 
    </div> 
</div> 

JS：私のJavascriptなし

$('.item').on('click', function(e){ 
     e.preventDefault(); 
     $(this).toggleClass('done'); 
     document.getElementById('this').checked = true; 
    }); 

、このマークアップは、動作しているようです。 <input>の表示を最後に置いておきたい

Answer 1

ネイティブHTMLを利用して、何をしようとしているのかを達成することができます。 Josh Sangerが述べたように、for属性がlabelに割り当てられると、そのラベルのinputへのフックが自動的にインスタンス化されます。対象となる入力が一致するid属性を持つ限り、それはリンクされます。そのフックが作成されたら、いくつかの基本的なセレクタ機構を使用して、異なるように見せたいHTML要素にクラスを追加することができます。

labelのinputタグがlabelに含まれていることを確認して、バウンドのクリックイベントが正しくトリガーするようにします。

$('input[type="radio"]').on('click', function(e) { 
 
    var colorDiv = $(this).closest($('div.fourcol')).find($('.price')); 
 
    var removeSelected = $('div.fourcol').find($('.price').not($(this))); 
 
    $(removeSelected).removeClass('done'); 
 
    $(colorDiv).addClass('done'); 
 
});

.orange, 
 
.gray, 
 
.white { 
 
    width: 48px; 
 
    height: 48px; 
 
    font-size: .79em; 
 
    text-align: center; 
 
} 
 
.orange { 
 
    background-color: orange; 
 
    border: solid 1px orange; 
 
} 
 
.gray { 
 
    background-color: #CCC; 
 
    border: solid 1px #CCC; 
 
} 
 
.white { 
 
    background-color: #FFF; 
 
    border: solid 1px #FFF; 
 
} 
 
input { 
 
    float: left; 
 
    display: inline-block; 
 
    clear: none; 
 
} 
 
.row.specs { 
 
    width: 250px; 
 
} 
 
.price.noColor { 
 
    border: solid 1px #ACE; 
 
} 
 
.noColor { 
 
    width: 48px; 
 
    height: 48px; 
 
    text-align: center; 
 
    font-family: arial; 
 
    font-size: 35px; 
 
    color: red; 
 
} 
 
.fourcol { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    font-family: arial; 
 
} 
 
.done { 
 
    border: dashed 1px green; 
 
} 
 
.price.noColor.done { 
 
    border: dashed 1px green; 
 
} 
 

 
body{ 
 
    background-color: #DDE; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="row specs"> 
 
    <div class="subtitle">Hull Colour</div> 
 
    <div class="fourcol"> 
 
    <label class="item" for="orange_radio"> 
 
     <div class="price orange">Orange</div> 
 
    </label> 
 
    <input data-color="orange" name="color" type="radio" value="orange" id="orange_radio" /> 
 
    </div> 
 

 
    <div class="fourcol"> 
 
    <label class="item" for="grey_radio"> 
 
     <div class="price gray">Grey</div> 
 
    </label> 
 
    <input data-color="grey" name="color" type="radio" value="gray" id="grey_radio" /> 
 
    </div> 
 

 
    <div class="fourcol"> 
 
    <label class="item" for="white_radio"> 
 
     <div class="price white">White</div> 
 
    </label> 
 
    <input data-color="white" name="color" type="radio" value="white" id="white_radio" /> 
 
    </div> 
 

 
    <div class="fourcol"> 
 
    <label class="item" for="noColor_radio"> 
 
     <div class="price noColor">X</div> 
 
    </label> 
 
    <input data-color="nocolor" name="color" type="radio" value="nocolor" id="noColor_radio" /> 
 
    </div> 
 
</div>