Javascript: Add an extra checkbox next to an existing checkbox

Question

I have this checkbox created using forms.py. I did not write html code, it's resulted rendering 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>

Using javascript I want to create an extra checkbox near to every option. For example if a user selects b option, on the right of b I want a new checkbox to be added.

Any ideas please?

Do you want this to happen indefinitely? (eg. A clicked = B appears; B clicked = C appears; C clicked = D appears and so on) Or only once? — Fester
– Fester, Commented Oct 7, 2015 at 10:05
@Fester If a clicked, a new checkbox is created and appeared next to a. A,B,C should be appeared from the beginning — zinon
– zinon, Commented Oct 7, 2015 at 10:08

Samuel Backman · Accepted Answer · 2015-10-07 10:10:16Z

1

this adds a checkbox next to the checkbox you selected

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

Demo

answered Oct 7, 2015 at 10:10

Samuel Backman

264 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Samuel Backman Over a year ago

Insert this line $(this).after('<input type="checkbox">'); before the alert and it should work @zinon

Samuel Backman Over a year ago

it will add the checkbox, but its not visible, inspect with chrome or firebug

zinon Over a year ago

I think it is because there is no label.

shas · Accepted Answer · 2015-10-07 10:20:33Z

0

Try something like this

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

answered Oct 7, 2015 at 10:20

shas

7032 gold badges9 silver badges32 bronze badges

Comments

Muhammad Usman · Accepted Answer · 2015-10-07 12:13:20Z

0

try something like this

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

edited Oct 7, 2015 at 12:13

answered Oct 7, 2015 at 9:56

Muhammad Usman

1,3625 gold badges19 silver badges35 bronze badges

1 Comment

zinon Over a year ago

Thank You. I do not to have a button and only next to the selected option (or optionS) a new checkbox will be appeared not to all.

Collectives™ on Stack Overflow

Javascript: Add an extra checkbox next to an existing checkbox

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related