checkbox form using JQuery

Question

I'm trying to figure out a code where if one or more checkbox is checked through a form submit, they would show their content. I'm close to doing it but the code only works in single instead of multiple checks. The content also gets stuck even though it's been unchecked after it's checked.

$(document).ready(function(){   
    $(function(){
        $('form').submit(function(e){
            e.preventDefault();

            if ($('.checkEdu').is(':checked')) 
            {   $('#education').show();
            } else if ($('.checkWork').is(':checked')){
                $('#experience').show();
            } else if ($('.checkAbout').is(':checked')){
                $('#about').show();
            }
            else {
                $('#education').hide();
                $('#experience').hide();
                $('#about').hide();
            }
        });
    });
});

This is the code I tried. Thanks

It would be nice to include the minimal HTML needed to reproduce your problem. — Andrew L
– Andrew L, Commented Apr 19, 2018 at 20:18
also could you elaborate on "the code only works in single instead of multiple checks" ? — Andrew L
– Andrew L, Commented Apr 19, 2018 at 20:20
Start by hiding all of them, then in seperate if's unhide accordingly. Since you are if-else you only get 1 or the other. — nurdyguy
– nurdyguy, Commented Apr 19, 2018 at 20:20
$(document).ready(function() {} and $(function() {} do the same thing. — user7744592
– user7744592, Commented Apr 19, 2018 at 20:21

jdgregson · Accepted Answer · 2018-04-19 20:22:29Z

2

I would suggest hiding them all first and then showing the ones that are selected:

$('#education').hide();
$('#experience').hide();
$('#about').hide();
if ($('.checkEdu').is(':checked')){
    $('#education').show();
}
if ($('.checkWork').is(':checked')){
    $('#experience').show();
}
if ($('.checkAbout').is(':checked')){
    $('#about').show();
}

answered Apr 19, 2018 at 20:22

jdgregson

1,6472 gold badges19 silver badges42 bronze badges

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

1 Comment

Zien Condor Over a year ago

thank you, I actually just thought about this code and check up on this to remove it. haha!

nurdyguy · Accepted Answer · 2018-04-19 20:23:34Z

1

Try this. Since more than one can be checked at a time they need separate if checks.

$(function(){
    $('form').submit(function(e){
        e.preventDefault();
        $('#education').hide();
        $('#experience').hide();
        $('#about').hide();            
        if ($('.checkEdu').is(':checked')){   
            $('#education').show();
        }
        if ($('.checkWork').is(':checked')){
            $('#experience').show();
        }
        if ($('.checkAbout').is(':checked')){
            $('#about').show();
        }

    });
});

answered Apr 19, 2018 at 20:23

nurdyguy

2,9433 gold badges28 silver badges33 bronze badges

Comments

Anfath Hifans · Accepted Answer · 2018-04-19 21:53:15Z

Your HTML code will be like this,

<form>
<input type="checkbox" class="checkEdu">
<input type="checkbox" class="checkWork">
<input type="checkbox" class="checkAbout">
<button type="submit">Submit</button>
</form>

<div id="education" style="display:none;">education</div>
<div id="experience" style="display:none;">experience</div>
<div id="about" style="display:none;">about</div>

add following jquery code

$(function(){   
    $('form').submit(function(e){
        e.preventDefault();
        $('#education, #experience, #about').hide();
        $('[type="checkbox"]:checked').each(function(k,v){
            switch($(v).attr('class')){
                case 'checkEdu' : $('#education').show(); break;
                case 'checkWork' : $('#experience').show(); break;
                case 'checkAbout' : $('#about').show(); break;
            }
        });
    });
});

Collectives™ on Stack Overflow

checkbox form using JQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related