Javascript:在现有复选框旁边添加额外的复选框

Question

我使用 forms.py 创建了此复选框。我没有编写 html 代码，它的结果是渲染 forms.py。

<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 的右侧添加一个新的复选框。

请问有什么想法吗？

Answer 1

这会在您选择的复选框旁边添加一个复选框

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

Demo