Showing/Hiding Fields on checkbox event using jQuery

203
September 02, 2017, at 01:54 AM

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!

Answer 1

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>

Rent Charter Buses Company
READ ALSO
Javascript. Add array to datetime input

Javascript. Add array to datetime input

I have a form with datetime_local html5 datetime input so that mobile users can use their native datetime picker instead of a jquery substitute which is generally clunkier

476
Check radio button based on stored value

Check radio button based on stored value

I'm trying to check a radio button based on the value of a var in localStorage

302
Run a javascript only on the child of the element that triggered it

Run a javascript only on the child of the element that triggered it

I want to run a javascript only upon the child from the element that triggered itI have tried to make a research but couldn't find a way to get an answer

262