Question

I have this html which works if it is in the page when it loads:

<input type="checkbox" name="originBusDock" value="Y"  />
<label for="originBusDock" onclick="document.booking.originBusDock.checked=(!document.booking.originBusDock.checked);">Loading Dock</label>

If I click on the label, the checkbox next to it checks, and if I click again, it unchecks.

My problem is if I populate an empty div with response data from an AJAX call with this same code, the onclick event is not working.
It appears I have to “rebind to the DOM”?? from what I could find, but how to do it?
The amount of checkboxes is variable and they all have different names. There are also other checkboxes in the page from the original page load that I dont want to affect.
I have seen this: onclick event on Ajax output but it uses a fixed ID and I wont know in advance what the ID names will be as it is generated dynamically on the AJAX call.
Hope that makes sense.
TIA

Answer 1

Labels attach to other elements based on the id attribute, not the name, so if you make sure your inputs have an id as follows:

<input type="checkbox" id="originBusDock" name="originBusDock" value="Y" />
<label for="originBusDock">Loading Dock</label>

…then you shouldn’t need the onclick event at all – clicking the label will automatically toggle the associated checkbox.