使用 jQuery 在复选框事件上显示/隐藏字段答案

【问题标题】：Showing/Hiding Fields on checkbox event using jQuery使用 jQuery 在复选框事件上显示/隐藏字段
【发布时间】：2017-09-02 02:53:54
【问题描述】：

我尝试使用this issue 作为指导，但我不确定我在下面的代码中做错了什么。如果有人可以提供帮助，我将不胜感激。

一点背景知识：我使用名为 Confiforms 的附加组件更改 HTML 的能力有限，因为它在 Confluence 中。我可以使用 Confiforms 隐藏/显示字段，但我通常发现当我这样配置时它会影响性能。

HTML：

<tr>
    <td class="label editLabel">Customer Impact?</td>
    <td>
        <p class="auto-cursor-target">
            <span class="i_holdingrow_impact">
                <span id="i_holdingrow_impact">
                    <input cf-field="impact" class="radio" type="checkbox" name="impact" id="i_impact">
                </span>
            </span>
        </p>
    </td>
</tr>
<tr>
    <td/>
    <td>
        <p>
            <span class="i_holdingrow_impactDesc">
                <span id="i_holdingrow_impactDesc">
                    <textarea cf-field="impactDesc" id="i_impactDesc" name="impactDesc" rows="4" class="textarea large-field cf_textarea"/>
                </span>
            </span>
        </p>
    </td>
</tr>

相关的jQuery：

$('input[type="checkbox"]').change(() => {
    if ($(this).is(':checked')) {
        $(this).closest('tr').next('tr').show();
    }
    else {
        $(this).closest('tr').next('tr').hide();
    }
});

谢谢！

【问题讨论】：

只是预感，但如果该表是动态加载的，您可能需要进行事件委托$('body').on('change', 'input[type="checkbox"], () => {});
所以是的，我肯定有这个函数可以在加载表格后加载。原来问题出在箭头功能上。箭头函数保留this，因此它不再是我将事件附加到的相关元素（使用@Dekel 的话）。将其更改为 function() {...} 而不是 () => {...} 解决了我的问题。

标签： javascript jquery html forms

【解决方案1】：

在使用带有箭头函数的 jquery 时应该非常小心：

$('input[type="checkbox"]').change(function() {
    if ($(this).is(':checked')) {
        $(this).closest('tr').next('tr').show();
    } else {
        $(this).closest('tr').next('tr').hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <td class="label editLabel">Customer Impact?</td>
    <td>
        <p class="auto-cursor-target">
            <span class="i_holdingrow_impact">
                <span id="i_holdingrow_impact">
                    <input cf-field="impact" class="radio" type="checkbox" name="impact" id="i_impact">
                </span>
            </span>
        </p>
    </td>
</tr>
<tr>
    <td/>
    <td>
        <p>
            <span class="i_holdingrow_impactDesc">
                <span id="i_holdingrow_impactDesc">
                    <textarea cf-field="impactDesc" id="i_impactDesc" name="impactDesc" rows="4" class="textarea large-field cf_textarea"></textarea>
                </span>
            </span>
        </p>
    </td>
</tr>
</table>

箭头函数保留this 的上下文，因此它不再是您将事件附加到的相关元素。

如果您确实想使用箭头功能，可以使用以下方法：

$('input[type="checkbox"]').change((evt) => {
    el = evt.currentTarget;
    if ($(el).is(':checked')) {
        $(el).closest('tr').next('tr').show();
    } else {
        $(el).closest('tr').next('tr').hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <td class="label editLabel">Customer Impact?</td>
    <td>
        <p class="auto-cursor-target">
            <span class="i_holdingrow_impact">
                <span id="i_holdingrow_impact">
                    <input cf-field="impact" class="radio" type="checkbox" name="impact" id="i_impact">
                </span>
            </span>
        </p>
    </td>
</tr>
<tr>
    <td/>
    <td>
        <p>
            <span class="i_holdingrow_impactDesc">
                <span id="i_holdingrow_impactDesc">
                    <textarea cf-field="impactDesc" id="i_impactDesc" name="impactDesc" rows="4" class="textarea large-field cf_textarea"></textarea>
                </span>
            </span>
        </p>
    </td>
</tr>
</table>

【讨论】：

哇，我已经习惯了使用箭头函数，以至于我完全忘记了如何保存它。我将其更改为 function() 并且效果很好。谢谢德克尔！