adding removing classes in JQuery

Question

I have a form which if a checkbox is selected extra fields appear and when not selected they disappear, the code I used to do this is:

$(function () {
    $('#cmntCheck').change(function () {
        if ($('#cmntCheck').is(':checked')) {
            $("#orderOptPanel").addClass('hidden');
            $("#stAddressRow").addClass('hidden');
            $("#cityRow").addClass('hidden');
            $("#stateRow").addClass('hidden');
        } else {
            $("#orderOptPanel").removeClass('hidden');
            $("#stAddressRow").removeClass('hidden');
            $("#cityRow").removeClass('hidden');
            $("#stateRow").removeClass('hidden');
        }
    }).change();
});

but it does not work, what I found works is .toggleClass() but that is not what I am looking for, I Tried .show() and .hide() but it did not work that is why I did it the way I did above. what I want to do is when the check box is selected show the extra fields and when it is not selected not show them. How do I do this?

JSFiddle

Do you actually have a CSS class called hidden with display: none or similar? — Mike Brant
– Mike Brant, Commented Nov 9, 2015 at 21:54

Rick Hitchcock · Accepted Answer · 2015-11-09 22:27:35Z

3

#cmntCheck is a div, so it can't be checked. However, you can test the checked state of its input.

You can toggle() the display of all elements based on the checked state of the input:

$('#cmntCheck input').change(function () {
  $('#orderOptPanel, #stAddressRow, #cityRow, #stateRow').toggle(!this.checked);
}).change();

Updated Fiddle

edited Nov 9, 2015 at 22:27

answered Nov 9, 2015 at 22:02

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

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

1 Comment

bcr Over a year ago

!this.checked but this is the most concise way of writing it

bcr · Accepted Answer · 2015-11-09 21:56:51Z

3

$(function () {
    $('#cmntCheck').change(function () {
        var isChecked = $('#cmntCheck').is(':checked')

        $("#orderOptPanel").toggle(!isChecked);
        $("#stAddressRow").toggle(!isChecked);
        $("#cityRow").toggle(!isChecked);
        $("#stateRow").toggle(!isChecked);

    });
});

You can use toggle (which accepts a bool) to set the style attribute instead of classes. Not sure why you're firing the change event after the change handler though?

answered Nov 9, 2015 at 21:56

bcr

3,82120 silver badges28 bronze badges

Comments

DinoMyte · Accepted Answer · 2015-11-09 22:04:11Z

2

You are probably missing the css class :

.hidden
{
    display: none;
}

http://jsfiddle.net/wd1z0zmg/4/

Or the best way to do it in minified way :

$('#cmntCheck').change(function () {
       $('#cmntCheck').is(':checked') ? $("#orderOptPanel, #stAddressRow,#cityRow,#stateRow").hide() : $("#orderOptPanel,#stAddressRow,#cityRow,#stateRow").show();          
    });

http://jsfiddle.net/wd1z0zmg/5/

edited Nov 9, 2015 at 22:04

answered Nov 9, 2015 at 21:56

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

Comments

Moe · Accepted Answer · 2015-11-10 13:58:06Z

2

There is no value behind adding a class called hidden if you only need to show / hide your controls. Just call Show and Hide functions. The cmntCheck here is your checkbox not your DIV

$(document).ready(function () {

   $("#cmntCheck").change(function () {

        var checked = $('#cmntCheck').is(':checked');
        if (checked) {
                 {
                    $("#orderOptPanel").hide();
                    $("#stAddressRow").hide();
                    $("#cityRow").hide();
                    $("#stateRow").hide();
                } else {
                    $("#orderOptPanel").show();
                    $("#stAddressRow").show();
                    $("#cityRow").show();
                    $("#stateRow").show();
                }
            })
        }); 
});

edited Nov 10, 2015 at 13:58

answered Nov 9, 2015 at 21:56

Moe

1,59911 silver badges16 bronze badges

4 Comments

مجاهد Over a year ago

I tried this, but with .show() when the check box is selected other wise .hide(), but it only hides it and when I select the box nothing shows

Moe Over a year ago

Just make sure the function is called again :/ I've updated the answer. Let me know if that works.

مجاهد Over a year ago

Sorry, it did not work, see my updated question, as well as the jsfiddle example provided.

Moe Over a year ago

I just realized that your container is a DIV not Check box. so Rick got it first ;)

Collectives™ on Stack Overflow

adding removing classes in JQuery

4 Answers 4

1 Comment

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related