動態創建的單選按鈕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> 

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

試試這個

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

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