Question

我有一个更新表单，每行动态显示通过和失败单选按钮。我想检查是否已在页面加载时检查了radioFail无线电控件，如果已经显示，则显示“注释”输入框（如果尚未显示）。注释输入框包含在一个div，其类名为failure_comments_textinput_section。我如何只显示正确的div，我已经尝试了一些jquery函数，即最近，找到等等，但无法显示适当的div与相应的评论。

我的代码如下所示：

 <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看起来像这样：

                            <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>
                                            &nbsp;&nbsp;
                                            <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>

任何帮助表示感谢。

Answer 1

考虑radioFail是收音机的ID

    if($('#radioFail').is(':checked')) {
            $('.failure_comments_textinput_section').show();
    }

Answer 2

$('.radioFail').each(function() {
    if($(this).is(':checked')){
         $(this).closest("tr").find(".failure_comments_textinput_section").show();
    }
});

检查是否检查了无线电，并且在同一表格行上显示div

2 个答案: