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：

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

没有我的Javascript，这个标记似乎有效。我想在最后将<input>的显示放在

上

Answer 1

您可以利用原生HTML来实现您的目标。正如Josh Sanger所提到的，当for属性被分配给label时，会自动实例化该标签的input的钩子。只要目标输入具有匹配id属性，它就会被链接。一旦创建了该钩子，您就可以使用一些基本的jQuery选择器机制将类添加到您希望以不同方式显示的HTML元素。

确保input的{{1}}标记位于label内，以便绑定的点击事件能够正确触发它。

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;
  }

如何在标签具有活动类时选择无线电

1 个答案: