jQuery：从直接“叔叔”中删除类

Question

我正在制作一个分成多个部分的表格。每个部分都在其自己的具有选项类的 DIV 中。

表单由包装在标签中的单选输入按钮组成。 （出于兼容性原因，标签必须在 IE8 中包装输入）*。当用户单击输入按钮时，我想使用 jQuery 将“tick”类添加到父包装标签。我还想从不是直接父标签的任何相邻父标签（即叔叔）中删除刻度类。但是，我只希望在直接部分而不是在其他部分中进行此删除。

我该怎么做？我以为我可以使用 jQuery 函数“最接近”来实现它，但它似乎不起作用。

这是JS Fiddle

这是我的 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 中无法使用。

Answer 1

你在找这个吗？

我稍微更改了您的代码，而不是检测对输入的点击，而是检测标签本身的点击。

$("label").click(function()
{
    $(this).siblings("label.ticked").removeClass('ticked');
    $(this).addClass('ticked');
});

JSFIDDLE DEMO