Strikethrough text based on checkbox - html

Question

Am trying to implement the following: Strikethrough a VAT value in a based on a checkbox click in another div.
I tried the following HTML and CSS but it didn't work:
.vat-checkbox:checked + .vat-value {
text-decoration: line-through;
}
<table>
<tr>
<td class="vat-check"><input type="checkbox" name="vat-check" class="vat-checkbox"> TVA<small>(19%)</small></td>
<td class="vat-value" id="vat">1 396,500</td>
</tr>
</table>
Can you please advise.

Answer 1

I don't think it is possible with pure CSS with nested elements (table). You can do it if the elements are on the same level:
.vat-checkbox:checked + span + .vat-value{text-decoration: line-through;}
<input type="checkbox" name="vat-check" class="vat-checkbox">
<span>TVA<small>(19%)</small></span>
<span class="vat-value" id="vat">1 396,500</span>
For nested elements you can use JavaScript:
const input = document.querySelector('[name="vat-check"]');
const value = document.getElementById('vat');
const handleChange = (e) => {
e.target.checked
? value.classList.add('checked')
: value.classList.remove('checked');
}
input.addEventListener('change', handleChange);
.vat-value.checked {
text-decoration: line-through;
}
<table>
<tr>
<td class="vat-check"><input type="checkbox" name="vat-check" class="vat-checkbox"> TVA<small>(19%)</small></td>
<td class="vat-value" id="vat">1 396,500</td>
</tr>
</table>

Answer 2

Try using javascript, I don't think CSS can achieve what you want if the elements are placed like that.
You were using Adjacent Sibling Selector
div + p
example: Select all <p> tags that immediately follows after <div> tag
Try the javascript below, using event listener and listen to when the checkbox is clicked then change the style of the vat.
const checkbox = document.querySelector("input[name=vat-check]");
const vat_value = document.getElementById('vat');
checkbox.addEventListener('change', function () {
if (this.checked)
vat_value.style.textDecoration = 'line-through';
else
vat_value.style.textDecoration = 'none';
});
<tr>
<td>
<label for="vat_checkbox">
<input id="vat_checkbox" type="checkbox" name="vat-check" class="vat-checkbox">
TVA<small>(19%)</small>
</label>
</td>
<td><span id="vat">1 396,500</span></td>
</tr>