如何选择从JavaScript添加的多个单选按钮

Question

有人能帮我解决这个问题吗?我被卡住了，我不知道该怎么办。我这里有一个单选按钮，我可以在一个表单中选择，但是当我添加另一个表单时，然后检查单选按钮，检查将转移到我添加的其他单选按钮。下面是代码

$("#ha").click(function() {
var tayo = "";
tayo += '<div class="row">';
tayo += '<div class="col-lg-12">';
tayo += '<select class="handicap">';
tayo += '<option value="">Select<option>';
tayo += '<option value="cb">TRUE or FALSE</option>';
tayo += '</select>';
tayo += '<div class="ahhh">';
tayo += '<div class="inputs"></div>';
tayo += '</div>';
tayo += '</div>';
tayo += '</div>';
$("#cardsss").append(tayo);
bindEvent();
});
function bindEvent() {
$('.handicap').change(function(e) {
var val = $(this).val();
if (val == "cb") {
$(e.target).next('.ahhh').html('<br><div class="inputs"><input type="radio" name="true_false[]" value="true">TRUE<input type="radio" name="true_false[]" value="false">FALSE</div>');
}
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="cardsss">
<div class="row">
<div class="col-lg-12">
<select class="handicap">
<option>Select</option>
<option value="cb">TRUE or FALSE</option>
</select>
<div class="ahhh">
<div class="inputs"></div>
</div>
</div>
</div>
</div>
<a id="ha" class="fa fa-clone"></a>

Answer 1

1. Delegate
2. 添加请选择允许更改事件
3. 您的输入中有true/true

$('#cardsss').on('change', '.handicap', function(e) {
var val = $(this).val();
if (val == "cb") {
$(e.target).next('.ahhh').html('<br><div class="inputs"><input type="radio" name="true_false[]" value="true">TRUE<input type="radio" name="true_false[]" value="false">FALSE</div>');
}
});
$('#cardsss').on('click', '.ahhh input', function(e) {
console.log($(this).val());
});
$("#ha").on("click", function() {
const tayo = $("#cardsss div").eq(0).clone()
$("#cardsss").append(tayo);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="cardsss">
<div class="row">
<div class="col-lg-12">
<select class="handicap">
<option value="">Please select</option>
<option value="cb">TRUE or FALSE</option>
</select>
<div class="ahhh">
<div class="inputs"></div>
</div>
</div>
</div>
</div>
<a id="ha" class="fa fa-clone"></a>