Javascript 标签具有活动类别时如何选择收音机

我正在制作一个网站，你可以选择几个选项来创建自己的船。我需要选择隐藏在标签后面的单选按钮，所以为了选择它们，我正在编写一些JS来实现这一点

下面是包含特定问题的少量代码（此代码用于整个网站）

---

如果没有我的Javascript，这个标记似乎可以工作。我想把

的显示放在末尾的none上

您可以利用原生

HTML

来实现您想要做的事情。正如Josh Sanger所提到的，当

for

属性被分配给

标签

时，该标签的

输入

中的挂钩将自动实例化。只要目标输入具有匹配的

id

属性，它就会被链接。一旦完成了这个钩子，您就可以使用一些基本的

jQuery

选择器机制向HTML元素添加您希望以不同方式显示的类

确保

标签

的

输入

标记位于

标签

内，以便绑定的单击事件将正确触发它

$（'input[type=“radio”]”）。在（'click'，函数（e）上{
var colorDiv=$（this）.closest（$（'div.fourcol'））.find（$（'price'））；
var removeSelected=$（'div.fourcol'）。查找（$（'price'）。而不是（$（this））；
$（removeSelected）.removeClass（'done'）；
$（colorDiv）.addClass（'done'）；
});
.orange，
灰色
怀特先生{
宽度：48px；
高度：48px；
字体大小：.79em；
文本对齐：居中；
}
.橙色{
背景颜色：橙色；
边框：实心1倍橙色；
}
格雷先生{
背景色：#CCC；
边框：实心1px#CCC；
}
怀特先生{
背景色：#FFF；
边框：实心1px#FFF；
}
输入{
浮动：左；
显示：内联块；
明确：无；
}
.row.specs{
宽度：250px；
}
.price.noColor{
边框：实心1px#ACE；
}
诺科洛尔先生{
宽度：48px；
高度：48px；
文本对齐：居中；
字体系列：arial；
字体大小：35px；
颜色：红色；
}
福科尔先生{
显示：内联块；
垂直对齐：顶部；
字体系列：arial；
}
.完成{
边框：虚线1px绿色；
}
.price.noColor.done{
边框：虚线1px绿色；
}
身体{
背景色：#DDE；
}

船体颜色
橙色
灰色
白色
X
如果您在标签上为

属性使用，它将触发具有相同ID的输入。这是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>

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