Question

我喜欢取data-color并将其输出到隐藏输入字段的value内。如果选中单选按钮，则会发生这种情况。

怎么可以这样做？

<input type="hidden" id="color" name="color" value=""/>
<input type="radio" id="radio1" name="radio" value="" data-color="option1">
<label for="radio1">
option1
</label>
<input type="radio" id="radio1" name="radio" value="" data-color="option2">
<label for="radio1">
option2
</label>

Answer 1

您可以使用HTMLElement dataset。

为了选择具有data-color属性的所有输入类型无线电：

$(function () {
  $(':radio').filter((i, e) => {return $(e).data('color')}).on('change', function(e) {
    $('#color').val(this.dataset.color);
    console.log("$('#color').val('" + this.dataset.color + "')");
  })
});

我的片段：

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<input type="hidden" id="color" name="color" value=""/>
<input type="radio" id="radio1" name="radio" value="" data-color="option1">
<label for="radio1">
    option1
</label>
<input type="radio" id="radio1" name="radio" value="" data-color="option2">
<label for="radio1">
    option2
</label>

{{1}}

Answer 2

注意：我创建了#color输入text而不是hidden，这样您就可以看到工作正常。我还为两个单选按钮提供了一个公共类，并为它们提供了唯一的ID。（页面上的所有HTML元素都应具有唯一的ID。）

$(function () {
  $('.color-button').change(function (e) {
    e.preventDefault();
    $('#color').val($('.color-button:checked').data('color'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="color" name="color" value=""/>


<input type="radio" id="radio1" class="color-button" name="radio" value="" data-color="option1">
<label for="radio1">
option1
</label>

<input type="radio" id="radio2" class="color-button" name="radio" value="" data-color="option2">
<label for="radio2">
option2
</label>

使用jQuery获取data-attribute

2 个答案: