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

在此之前清除：

＆＃13;

$('#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');
});

＆＃13;

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

＆＃13;

Answer 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>
$('#op1').click(function() {
    $('#radioDiv1').append('<input type="radio" />');
    $('#radioDiv1').append('A');
    $('#radioDiv2').append('<input type="radio" />');
    $('#radioDiv2').append('B');
    $('#radioDiv3').hide();
    $('#radioDiv4').hide();
        $('#radioDiv1').show();
    $('#radioDiv2').show();
});
$('#op2').click(function() {
    $('#radioDiv3').append('<input type="radio" />');
    $('#radioDiv3').append('C');
    $('#radioDiv4').append('<input type="radio" />');
    $('#radioDiv4').append('D');
     $('#radioDiv1').hide();
    $('#radioDiv2').hide();
        $('#radioDiv3').show();
    $('#radioDiv4').show();
});

演示：https://jsfiddle.net/hhjoo40b/

Answer 3

试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

动态创建单选按钮Jquery

3 个答案: