动态创建单选按钮Jquery
动态创建单选按钮Jquery
提问于 2015-06-02 12:35:19
我想动态地创建两个单选按钮来选择一个已经存在的单选按钮。
<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。是否有任何方法使单选按钮出现并在特定选择时消失？谢谢。
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-06-02 12:40:10
在做这件事之前先弄清楚：
$('#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>
Stack Overflow用户
发布于 2015-06-02 12:42:58
试试这个..。
<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();
});Stack Overflow用户
发布于 2015-06-02 12:40:10
试试这个
$('#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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30596265
复制相关文章
相似问题
腾讯云开发者
