セクションに分割されたフォームを作成しています。各セクションは、オプションのクラスを持つ独自の DIV にあります。
フォームは、ラベルでラップされたラジオ入力ボタンで構成されています。(IE8 では互換性の理由から、ラベルは入力をラップする必要があります)*。ユーザーが入力ボタンをクリックすると、jQuery を使用して親ラッパー ラベルに「tick」クラスを追加したいと考えています。また、直接の親ラベルではない隣接する親ラベル (つまり、叔父) から tick クラスを削除したいと考えています。ただし、この削除は直近のセクションでのみ行い、他のセクションでは行わないようにしたいと考えています。
これどうやってするの?jQuery関数「closest」で実現できると思っていましたが、うまくいかないようです。
ここにJSフィドルがあります
ここに私のHTMLがあります:
<div class="daddyhair hairstyle hairoption option">
<label for="chara2-hairdaddy1" onclick="" class="chara2-hairdaddy1 ticked" >
<input name="hairstyle" class="chara2-hairdaddy1" id="chara2-hairdaddy1" type="radio" value="chara2-hairdaddy1" checked="checked" />
</label>
<label for="chara2-hairdaddy2" onclick="" class="chara2-hairdaddy2">
<input name="hairstyle" id="chara2-hairdaddy2" type="radio" value="chara2-hairdaddy2" />
</label>
<label for="chara2-hairdaddy3" onclick="" class="chara2-hairdaddy3">
<input name="hairstyle" id="chara2-hairdaddy3" type="radio" value="chara2-hairdaddy3" />
</label>
<label for="chara2-hairdaddy4" onclick="" class="chara2-hairdaddy4">
<input name="hairstyle" id="chara2-hairdaddy4" type="radio" value="chara2-hairdaddy4" />
</label>
<label for="chara2-hairdaddy5" onclick="" class="chara2-hairdaddy5 ">
<input name="hairstyle" id="chara2-hairdaddy5" type="radio" value="chara2-hairdaddy5" />
</label>
<label for="chara2-hairdaddy6" onclick="" class="chara2-hairdaddy6 ">
<input name="hairstyle" id="chara2-hairdaddy6" type="radio" value="chara2-hairdaddy6" />
</label>
<label for="chara2-hairdaddy7" onclick="" class="chara2-hairdaddy7 " >
<input name="hairstyle" id="chara2-hairdaddy7" type="radio" value="chara2-hairdaddy7" />
</label>
<label for="chara2-hairdaddy8" onclick="" class="chara2-hairdaddy8 ">
<input name="hairstyle" id="chara2-hairdaddy8" type="radio" value="chara2-hairdaddy8" />
</label>
<label for="chara2-hairdaddy9" onclick="" class="chara2-hairdaddy9 ">
<input name="hairstyle" id="chara2-hairdaddy9" type="radio" value="chara2-hairdaddy9" />
</label>
</div>
<div class="daddymoustache moustachestyle hairoption option">
<label for="chara2-moustachedaddy1" onclick="" class="chara2-moustachedaddy1 ticked">
<input name="moustachestyle" id="chara2-moustachedaddy1" type="radio" value="chara2-moustachedaddy1" checked="checked" />
</label>
<label for="chara2-moustachedaddy2" onclick="" class="chara2-moustachedaddy2" >
<input name="moustachestyle" id="chara2-moustachedaddy2" type="radio" value="chara2-moustachedaddy2" />
</label>
<label for="chara2-moustachedaddy3" onclick="" class="chara2-moustachedaddy3">
<input name="moustachestyle" id="chara2-moustachedaddy3" type="radio" value="chara2-moustachedaddy3" />
</label>
</div>
<div class="daddysideburn sideburnstyle hairoption option">
<label for="chara2-sideburndaddy1" onclick="" class="chara2-sideburndaddy1 ticked">
<input name="sideburnstyle" id="chara2-sideburndaddy1" type="radio" value="chara2-sideburndaddy1" />
</label>
<label for="chara2-sideburndaddy2" onclick="" class="chara2-sideburndaddy2 ">
<input name="sideburnstyle" id="chara2-sideburndaddy2" type="radio" value="chara2-sideburndaddy2" />
</label>
</div>
JSFiddle に掲載されているコードは省略されています。完全なコードは CSS の背景を使用しますが、入力がラベルでラップされていない場合、IE8 では機能しません。