Showing/Hiding Fields on checkbox event using jQuery

Question

I tried to use this issue as a guide, but I'm not sure what I'm doing wrong with my below code. I'd appreciate it if someone could help out.

A little background: I have limited ability to change the HTML as it's in Confluence using an add-on called Confiforms. I can hide/show fields using Confiforms, but I generally find that it takes a performance hit when I configure it that way.

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>

Relevant jQuery:

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

Thanks!

Just a hunch, but if that table is loaded dynamically you might need to do event delegation $('body').on('change', 'input[type="checkbox"], () => {}); — D Lowther
– D Lowther, Commented Sep 1, 2017 at 18:54
So yeah, I definitely have that function to load after the table is loaded. It turned out the issue was with the arrow function. Arrow functions preserve this so it's no longer the relevant element I attached the event to (using the words of @Dekel). Changing it to function() {...} rather than () => {...} fixed my issue. — Ahmed K
– Ahmed K, Commented Sep 1, 2017 at 19:14

Dekel · Accepted Answer · 2017-09-01 18:53:54Z

You should be very careful when using jquery with arrow functions:

$('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>

The arrow-function preserve the context of this, thus it's no longer the relevant element you attached the event to.

In case you do want to use arrow function, you can use the following:

$('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>

Wow, I got so used to using arrow functions that I totally forgot about the preservation of this. I changed it to function() and it worked perfectly. Thanks Dekel!

Collectives™ on Stack Overflow

Showing/Hiding Fields on checkbox event using jQuery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related