Javascript：在现有复选框旁边添加一个额外的复选框

问题描述：

我有这个使用forms.py创建的复选框。我没有写html代码，结果呈现forms.py。Javascript：在现有复选框旁边添加一个额外的复选框

<div id="div_id_diag-diagnosis_option" class="form-group"> 
<label for="id_diag-diagnosis_option_0" class="control-label col-md-3 requiredField"> 
Option<span class="asteriskField">*</span></label> 
<div class="controls col-md-8"><label class="checkbox"> 
<input type="checkbox" name="diag-diagnosis_option" id="id_diag-diagnosis_option_1" value="b" >b</label> 
<label class="checkbox"> 
<input type="checkbox" name="diag-diagnosis_option" id="id_diag-diagnosis_option_2" value="a" >a</label> 
<label class="checkbox"> 
<input type="checkbox" name="diag-diagnosis_option" id="id_diag-diagnosis_option_3" value="c" >c</label> 
</div></div>

使用javascript我想在每个选项附近创建一个额外的复选框。例如，如果用户选择b选项，在b的右侧，我想要添加一个新的复选框。

有什么想法吗？

使用jquery onclick事件并追加一个复选框... –

@ShiguriAnemone'你能给我一个简单的例子吗？ – zinon

你想让它无限期地发生吗？（例如A点击= B出现; B点击= C出现; C点击= D出现等等）或者只有一次？ – Fester

答

这增加了旁边的复选框复选框您选择

$("input[type='checkbox']").click(function(){ 
    $(this).after('<input type="checkbox">'); 
})

Demo

插入此行$（this）.after（''）;警报之前，它应该工作@zinon –

它会添加复选框，但它不可见，用铬或萤火虫检查 –

我认为这是因为没有标签。 – zinon

答

尝试这样的事情

$("input[type='checkbox']").click(function(){ 
    $(this).after('<input type="checkbox" name="diag-diagnosis_option" id="id_diag-diagnosis_option_2" value="a" >'); 
})

JSFIDDLE CODE SAMPLE

开始出现谢谢。我不会有一个按钮，只有在选定的选项（或选项）旁边才会出现一个新的复选框。 – zinon

@zinon：请添加相关html代码，谢谢 –

答

尝试是这样的

$("input[type='checkbox']").click(function(){ 
    if ($(this).prop('checked')) 
    $(this).after('<input type="checkbox">'); 
});

Javascript：在现有复选框旁边添加一个额外的复选框

相关推荐