将ID添加到按钮，但必须根据单选输入选择进行更改

Adding ID to button, but must change based on radio input selection

本文关键字：输入 单选 选择 添加 ID 按钮      更新时间：2023-09-26

编辑为添加HTML：不完全一样，因为我已经不在办公室了，但你会明白的。

场景是我有一个网站的一部分，用户可以从他们保存的多个地址中选择一个。ID会为每个地址生成，我需要将该ID应用到一个按钮来提交表单

我已经得到了它，所以按钮在第一次点击时就会收到ID，但如果我尝试选择不同的地址，ID将不会切换。如何让按钮使用最近选择的无线电输入的ID？我正在使用一个数据属性来选择这个。

HTML:
<div>
 <form>
    <input type="radio" data-js="select" id="Test123" /> (id created dynamically)
    <label>Address 1</label>
    <input type="radio" dat-js="select" id="Test124" /> (id created dynamically)
    <label>Address 2</label>
</form>
</div>
<button class="address-continue">Continue</button>
var radioID = $('*[data-js]').attr('id');
var addrContinue = $('.address-continue');
$('*[data-js]').click(function () {
        $(addrContinue).attr('id', radioID);
    });

场景：用户单击地址1，于是ID被放置在地址1的按钮上。用户犯了一个错误，意在点击地址2。目前，当我点击地址2时，按钮上的ID不会改变。它与原始单击保持不变。

我需要继续按钮上的ID根据正确的收音机选择进行更改。

由于id是唯一的，请使用类

$('*[data-js]').click(function () {
    var addrButton = $('.address-continue');
    addrButton.removeClass(test123);
    addrButton.removeClass(test124);
    radioID = $('*[data-js]').attr('id');
    addrButton.addClass(radioID);
});

此外，你的基本问题可能是因为你没有在你的无线电功能中收集你的radioID，因此它没有更新，所以试试这个

$('*[data-js]').click(function () {
    var radioID = $('*[data-js]').attr('id');
    $(addrContinue).attr('id', radioID);
});

下面应该为您做这件事，希望相应的元素按相同的顺序排列：

$('[data-js]').on('change',function() {
  $('.address-continue').data('id', this.id);
});
$('.address-continue').on('click',function() {
  alert( $(this).data('id') );
});

不能为文档中的第二个元素分配另一个元素的id。ID应该是唯一的；因此我使用了CCD_ 1。

$('[data-js]').on('change',function() {
  $('.address-continue').data('id', this.id);
});
$('.address-continue').on('click',function() {
  alert( $(this).data('id') );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <form>
    <input type="radio" name="address" data-js="select" id="Test123" /> (id created dynamically)
    <label>Address 1</label>
    <input type="radio" name="address" data-js="select" id="Test124" /> (id created dynamically)
    <label>Address 2</label>
</form>
</div>
<button class="address-continue">Continue</button>

相关文章：