0

セクションに分割されたフォームを作成しています。各セクションは、オプションのクラスを持つ独自の 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 では機能しません。

4

1 に答える 1