dynamic checkbox with jquery

Question

I want to create a form with dynamic check box, when a user click the button the form will add the same form next after the previous form. I have tried a lot but didn't get it, also i tried with clone method, i get the form every time when I click the button but it was not clickable. Can anyone help?

Here is my JS below

$('#check-type').click(function(){
    $('.multiple-choice').show();
    var sth = $('.multiple-choice:first').clone().appendTo('.container');
    $('.multiple-choice:last').hide();
});

and my HTML

<button id="check-type" value="Multiple choice">Multiple choice</button>
<div class="container"></div>
<form class="multiple-choice">
    <div id="choice" class="css-selectbox">
        <h3 id="title" name="question-title" class="first-header">Choice</h3>
        <p class="label-checkboxitem">Which features did you like?</p>            
        <input id="check1" onclick=uncheck(this) type="checkbox" name="check" value="check1" class="input-checkboxitem">  
        <label for="check1">Materials</label>
        <br> <br> 
        <input id="check2" onclick=uncheck(this) type="checkbox" name="check" value="check2" class="input-checkboxitem">  
        <label for="check2">Exam Method</label>
        <br><br>             
        <input id="check6" onclick=uncheck(this) type="checkbox" name="check" value="check6" class="input-checkboxitem">
        <label for="check6">None</label>
    </div>
</form>

After form is cloned, element's ids will not be unique anymore - it can cause problems — Regent, Jul 29 '14 at 08:16
Don't use inline event handlers (like `onclick` etc) when you have something like jQuery on your page. This goes against everything jQuery stands for. jQuery gives you advanced ways to define event handlers, use them instead. — Tomalak, Jul 29 '14 at 08:31
@Regent i dont think it is working properly. Can you check that jsfiddle again? — raj, Jul 29 '14 at 09:58

score 0 · Answer 1 · answered Jul 29 '14 at 08:28

0

Is there a reason why you are hiding the last element?

Simply commenting that line got the code running for me.

DEMO

answered Jul 29 '14 at 08:28

Sir Celsius

822
8
22

It actually works and without commenting out this line – Regent Jul 29 '14 at 08:39
Yeah, it works, but I guess OP wanted to see the result on his page. – Sir Celsius Jul 29 '14 at 08:47
1

It will be very strange to hide form wanting to show it. Even though the question is not the clearest one, I still assume that problem is in "but it was not clickable". – Regent Jul 29 '14 at 08:55
.multiple-choice{ display:none; } after reloading the page i wanted to hide the form except the button so i hide that last element so that it won't appear 2 forms at one click – raj Jul 29 '14 at 09:05

score 0 · Answer 2 · answered Jul 29 '14 at 08:55

0

you need to use the following code

$('#check-type').click(function () {
    $("#choice").clone().prependTo(".multiple-choice");
});

You can also check the code at http://jsfiddle.net/Y538U/

answered Jul 29 '14 at 08:55

Usman Khawaja

809
14
28

checkbox is not working properly. When you click one item and add another form then u will see that form is checked automatically. – raj Jul 29 '14 at 09:59
still there is a same problem. – raj Jul 29 '14 at 10:22
@raj so your problem was that there are some (same as in original one) checked boxes in dynamically created form? It definitely was not mentioned in question. – Regent Jul 29 '14 at 10:45
@Regent what i mean is the first form is clickable but when you add another form and click on the check boxes it doesn't work instead it affects on the first form. you can check in the jsfiddle above by Usman Khawaja where there is still a problem – raj Jul 29 '14 at 10:57
@UsmanKhawaja there is some change in the code but still i can see the problem there. – raj Jul 29 '14 at 10:59
@raj in [Usman Khawaja's updated fiddle](http://jsfiddle.net/Y538U/6/) (I just add `alert` on clicking) I click on checkbox of another form, check box becomes checked, it doesn't affect first form and its ID is alerted without problems. But if you check whether check box is checked or not using `input` ID, than you should understand that you have multiple `input`'s with same ID (which is bad idea, by the way), so it's not obvious which `input`'s state you will get. – Regent Jul 29 '14 at 11:14
@Regent thanks, i got the point what you mean and just a question, is it possible to have multiple input with different id by clone() method? – raj Jul 29 '14 at 11:31
@raj `.clone()` can't do it for you. So you should either switch from `id` to something else (`class` or `data-id` for example) or modify IDs after cloning: [example of changing IDs](http://stackoverflow.com/questions/10126395/how-to-jquery-clone-and-change-id) – Regent Jul 29 '14 at 12:11

dynamic checkbox with jquery

2 Answers2