2015-10-07 71 views
0

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

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

有什么想法吗?

+0

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

+0

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

+0

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

回答

1

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

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

Demo

+0

插入此行$(this).after('');警报之前,它应该工作@zinon –

+0

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

+0

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

1

尝试这样的事情

$("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

+0

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

+0

@zinon:请添加相关html代码,谢谢 –

0

尝试是这样的

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