Show hide textbox based on checkboxlist item using jquery

Question

I have a checklistbox and a textbox. The textbox is not displayed at first load. It will be displayed if I check Other option in checklistbox. How this can be done using jquery?

Below is my html code:

<table>
    <tr>
        <td>
            <input name="Offices[0].ID" id="Offices_0__ID" type="hidden" value="Singapore">
            <input name="Offices[0].Name" id="Offices_0__Name" type="hidden" value="Singapore">
            <input name="Offices[0].Checked" id="Offices_0__Checked" type="checkbox" value="true" data-val-required="The Checked field is required." data-val="true">
            <input name="Offices[0].Checked" type="hidden" value="false">
            Singapore
        </td>
    </tr>
    <tr>
        <td>
            <input name="Offices[1].ID" id="Offices_1__ID" type="hidden" value="Kuala Lumpur">
            <input name="Offices[1].Name" id="Offices_1__Name" type="hidden" value="Kuala Lumpur">
            <input name="Offices[1].Checked" id="Offices_1__Checked" type="checkbox" value="true" data-val-required="The Checked field is required." data-val="true">
            <input name="Offices[1].Checked" type="hidden" value="false">
            Kuala Lumpur
        </td>
    </tr>
    <tr>
        <td>
            <input name="Offices[2].ID" id="Offices_2__ID" type="hidden" value="Other">
            <input name="Offices[2].Name" id="Offices_2__Name" type="hidden" value="Other">
            <input name="Offices[2].Checked" id="Offices_2__Checked" type="checkbox" value="true" data-val-required="The Checked field is required." data-val="true">
            <input name="Offices[2].Checked" type="hidden" value="false">
            Other
        </td>
    </tr>
</table>

Note: The checklistbox can growth based on number of offices in database.

This what I've done so far:

$(document).ready(initialize);
function initialize() {
    $("input#otheroffice").hide();
    $(":checkbox").click(showHideOtherOffice);
}

function showHideOtherOffice() {
    if ($("input#Offices_item_Checked").is(':checked')) { <-- I don't know how to get Other's checkbox id 
        $("input#otheroffice").show();
    }
    else {
        $("input#otheroffice").hide();
    }
}

PeterKA · Accepted Answer · 2015-04-29 12:37:33Z

1

Here is a simple example that set you on your way:

$(':checkbox[name=office]').on('change', function() {
    if( $(':checkbox[value=other]').is(':checked') ) {
        $('span.other-txt').removeClass( 'hide' );
    } else {
        $('span.other-txt').addClass( 'hide' );
    }
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Office:<br>
<input type="checkbox" name="office" value="singapore"> Singapore<br>
<input type="checkbox" name="office" value="kuala lampur"> Kuala Lampur<br>
<input type="checkbox" name="office" value="other"> Other <br>
<span class="other-txt hide">
  <input type="textbox" name="Other_Text"/>
</span>

answered Apr 29, 2015 at 12:37

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

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

4 Comments

Willy Over a year ago

Thanks for the answer, but as you can see in my question, the name is not simple as "office", there is index on it.

PeterKA Over a year ago

That, in my view, would be the simpler part of the task. It all depends on how you structure your document; it Other is always the last choice .... use $(':checkbox[id^="Offices_"]').last() to select other ... or, if you gave it a data-value="other" attribute, you could use it to zero in on the right checkbox ......

Willy Over a year ago

Thanks for the clue, for moment it solved my problem, but I still curious if it is not the last choice.

PeterKA Over a year ago

As I said it all depends on your structure and any distinctive attributes you may use. Provide a specific example and let me know how I can help.

Collectives™ on Stack Overflow

Show hide textbox based on checkboxlist item using jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related