CODEWITHSUNDEEP
jquerytwitter-bootstrap
مجاهد
مجاهد

Reputation: 155

adding removing classes in JQuery

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

Upvotes: 0

Views: 59

Answers (4)

Moe
Moe

Reputation: 1599

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();
                }
            })
        }); 
});

Upvotes: 2

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

#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

Upvotes: 3

DinoMyte
DinoMyte

Reputation: 8858

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/

Upvotes: 2

bcr
bcr

Reputation: 3811

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

Upvotes: 3

Related Questions