javascript - Show hide textbox based on checkboxlist item using jquery -
i have checklistbox , textbox. textbox not displayed @ first load. displayed if check other option in checklistbox. how can done using jquery?
below 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 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 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 required." data-val="true"> <input name="offices[2].checked" type="hidden" value="false"> other </td> </tr> </table>
note: checklistbox can growth based on number of offices in database.
this i've done far:
$(document).ready(initialize); function initialize() { $("input#otheroffice").hide(); $(":checkbox").click(showhideotheroffice); } function showhideotheroffice() { if ($("input#offices_item_checked").is(':checked')) { <-- don't know how other's checkbox id $("input#otheroffice").show(); } else { $("input#otheroffice").hide(); } }
here simple example set on 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>
Comments
Post a Comment