CODEWITHSUNDEEP
javascriptjquerycheckbox
sikas
sikas

Reputation: 5523

jQuery Checkbox Action when Checked

I have a checkbox which when selected, should show table rows, and when unchecked, should hide the rows .. Below is my code:

        <tr class='row New Request' style="display:none">
            <td>Storage</td>
            <td><input type="checkbox" name="storage" value="storage"></td>
        </tr>
        <tr class='row New Request' style="display:none">
            <td>Network Infrastructure</td>
            <td><input type="checkbox" id="network" name="network" value="network"></td>
        </tr>
        <tr class='subrow network' style="display:none">
            <td><input type="checkbox" id="Wireless" name="Wireless" value="Wireless Connection">Wireless Connection</td>
            <td><input type="checkbox" id="LAN" name="LAN" value="LAN Connection">LAN Connection</td>
        </tr>
        <tr class='row New Request' style="display:none">
            <td>Security Infrastructure</td>
            <td><input type="checkbox" name="security" value="security"></td>
        </tr>
        <tr class='row New Request' style="display:none">
            <td>New Requset 4</td>
            <td></td>
        </tr>

And for the jQuery, here it is:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        function changeVal() {
            $('#myHeader').html(this.name);
            $(this).closest('tr').nextAll('.row').hide();
            $(this).closest('tr').nextAll('.subrow').hide();
            $('.'+this.value).show();
            var tempText = "";
            switch(this.value)
            {
                case "Inquiry":
                    tempText="Send Inquiry";
                    break;
                case "Feedback":
                    tempText="Send Feedback";
                    break;
                case "Complain":
                    tempText="File Complain";
                    break;
                case "Request":
                    tempText="New Request";
                    break;
            }
            $('#myHeader').html(tempText).toggle(this.value != 'default');
        }

        $(function(){
            $('#contactSelect').change(changeVal);
        });
    </script>
    <script>
        function changeValSub() {
            $(this).closest('tr').nextAll('.subrow').hide();
            //$('.'+this.value).show();
            alert($(this).select() == false);
            if($(this).select() == false)
                $('.'+this.value).hide();
            else
                $('.'+this.value).show();
        }

        $(function(){
            $('#network').change(changeValSub);
        });
    </script>

This is a part of complete table that shows/hides rows depending on the dropdown and the checkboxes ..

Upvotes: 2

Views: 82

Answers (2)

Chris
Chris

Reputation: 997

As discussed in the chatroom. We made some fixes like adding the id to the security checkbox and also removing the callback function and using toggle instead.

Here is the final jsfiddle: https://jsfiddle.net/g8vukbpk/8/

.toggle();

Upvotes: 1

jtrumbull
jtrumbull

Reputation: 818

Use $.is(':checked') instead of $.select(). i.e.

function changeValSub() {
  $(this).closest('tr').nextAll('.subrow').hide();
  if ($(this).is(':checked')) {
    $('.'+this.value).show();
  }
}

See JSFiddle

Upvotes: 0

Related Questions