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!
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>
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
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
I'm trying to check a radio button based on the value of a var in localStorage
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
I am new to Javascript and Angular