javascript - 动态创建单选按钮 Jquery

Question

我想在选择一个已经存在的单选按钮时动态创建 2 个单选按钮。

<form>
    <input type="radio" name="select" value="m" id="op1" />1
    <br>
    <div id="radioDiv1"></div>
    <div id="radioDiv2"></div>

    <input type="radio" name="select" value="f" id="op2" />2
    <br>
    <div id="radioDiv3"></div>
    <div id="radioDiv4"></div>
</form>

这是我的 Jquery:

$('#op1').click(function() {
    $('#radioDiv1').append('<input type="radio" />');
    $('#radioDiv1').append('A');
    $('#radioDiv2').append('<input type="radio" />');
    $('#radioDiv2').append('B');
});
$('#op2').click(function() {
    $('#radioDiv3').append('<input type="radio" />');
    $('#radioDiv3').append('C');
    $('#radioDiv4').append('<input type="radio" />');
    $('#radioDiv4').append('D');
});

假设我点击 1，我需要单选按钮 A 和 B 出现。假设我想将选择从 1 更改为 2，我需要 A 和 B 消失，C 和 D 出现。但是，单选按钮不会消失。此外，从选项 2 返回到选项 1 时，会创建另一组 A 和 B。 有没有办法让单选按钮在特定选择上出现和消失？谢谢。

Answer 1

执行此操作之前先清除:

$('#op1').click(function() {
    $('#radioDiv1, #radioDiv2, #radioDiv3, #radioDiv4').html('');
    $('#radioDiv1').append('<input type="radio" />');
    $('#radioDiv1').append('A');
    $('#radioDiv2').append('<input type="radio" />');
    $('#radioDiv2').append('B');
});
$('#op2').click(function() {
    $('#radioDiv1, #radioDiv2, #radioDiv3, #radioDiv4').html('');
    $('#radioDiv3').append('<input type="radio" />');
    $('#radioDiv3').append('C');
    $('#radioDiv4').append('<input type="radio" />');
    $('#radioDiv4').append('D');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
    <input type="radio" name="select" value="m" id="op1" />1
    <br>
    <div id="radioDiv1"></div>
    <div id="radioDiv2"></div>

    <input type="radio" name="select" value="f" id="op2" />2
    <br>
    <div id="radioDiv3"></div>
    <div id="radioDiv4"></div>
</form>