Reputation: 115
I have an update form that dynamically displays pass and fail radio buttons per row. I want to check to see if the radioFail radio control has been checked on page load, if it has then display the Comments input box if it hasn't then dont display it. The comments input box is wrapped in a div with a class name of failure_comments_textinput_section. How do i just display the correct div, i have tried a few jquery functions i.e. closest, find etc etc but unable to display the appropiate div with the corrosponding comments.
My code looks like this:
<script>
$(document).ready(function () {
//Hide all divs on page load.
$(".failure_comments_textinput_section").hide();
//loop through each radioFail input and if checked show commnets div
$('.radioFail').each(function() {
if($(this).is(':checked')){
$('.failure_comments_textinput_section').show();
}
});
</script>
HTML looks like this:
<table class="table table-striped">
<tr>
<th></th>
<th>Criteria</th>
<th>Pass/Fail*</th>
<th>Failure Comments</th>
</tr>
<cfloop query="local.qryGetCategoryCriteria">
<tr>
<td>#local.qryGetCategoryCriteria.CurrentRow#</td>
<td style="width:400px">#local.qryGetCategoryCriteria.TC_CRITERIA_NAME#
<input type="hidden" id="criteria_name_#local.qryGetCategoryCriteria.NC_ID#" name="criteria_name_#local.qryGetCategoryCriteria.NC_ID#" value="#local.qryGetCategoryCriteria.TC_CRITERIA_NAME#">
<input type="hidden" id="category_name_#local.qryGetCategoryCriteria.NC_ID#" name="category_name_#local.qryGetCategoryCriteria.NC_ID#" value="#local.qryGetCategoryCriteria.TC_CATEGORY_NAME#">
<input type="hidden" id="criteria_name_list" name="criteria_name_list" value="#local.qryGetCategoryCriteria.TC_CRITERIA_NAME#">
<input type="hidden" id="id" name="id" value="#local.qryGetCategoryCriteria.NC_ID#">
<input type="hidden" id="criteria_id_#local.qryGetCategoryCriteria.NC_ID#" name="criteria_id_#local.qryGetCategoryCriteria.NC_ID#" value="#local.qryGetCategoryCriteria.NC_CRITERIA_ID#">
<input type="hidden" id="category_id_#local.qryGetCategoryCriteria.NC_ID#" name="category_id_#local.qryGetCategoryCriteria.NC_ID#" class="category_id" value="#local.qryGetCategoryCriteria.NC_CATEGORY_ID#">
</td>
<td>
<label>
<input required onchange="radioPass(#local.qryGetCategoryCriteria.NC_ID#);" type="radio" value="PASS" name="criteria_pass_fail_#local.qryGetCategoryCriteria.NC_ID#" class="radioPass" <cfif local.qryGetCategoryCriteria.TC_CRITERIA_PASS_FAIL EQ "PASS">checked</cfif> > PASS
</label>
<label>
<input required onchange="radioFail(#local.qryGetCategoryCriteria.NC_ID#);" type="radio" value="FAIL" name="criteria_pass_fail_#local.qryGetCategoryCriteria.NC_ID#" class="radioFail" <cfif local.qryGetCategoryCriteria.TC_CRITERIA_PASS_FAIL EQ "FAIL">checked</cfif> > FAIL
</label>
</td>
<td>
<div id="failure_comments_textinput_section_#local.qryGetCategoryCriteria.NC_ID#" class="failure_comments_textinput_section">
<textarea name="failure_comments_textinput_#local.qryGetCategoryCriteria.NC_ID#" id="failure_comments_textinput_#local.qryGetCategoryCriteria.NC_ID#" class="form-control failure_comments_textinput" placeholder="Enter your comments here...">#local.qryGetCategoryCriteria.TC_FAILURE_COMMENTS_TEXT#</textarea>
</div>
</td>
</tr>
</cfloop>
</table>
Any help appreciated.
Upvotes: 0
Views: 77
Reputation: 115
$('.radioFail').each(function() {
if($(this).is(':checked')){
$(this).closest("tr").find(".failure_comments_textinput_section").show();
}
});
Upvotes: 0
Reputation: 104
Considering radioFail is the ID of the the radio
if($('#radioFail').is(':checked')) {
$('.failure_comments_textinput_section').show();
}
Upvotes: 0