How to repeat table rows by unchecking a checkbox?

[mike324]

Hi,

I have a table with 10 rows. Underneath is a checkbox (checked by default).

If the user unchecks the box, I’d like the same 10 rows (minus any content the user has entered) repeating, underneath the checkbox.

This doesn’t have to be all the same table. It could just as easily be the whole table that gets repeated underneath. Makes no difference to me.

I know there’s a LOT of similar JS “out there” but I can’t find how to do exactly this and my JS is just beginner level.

Apologies for not being able to offer anything codewise to work with.

Cheers

[Paul_Wilkins]

A checkbox can be unchecked multiple times.

Can we please get further details about how it will be used, what the checkbox says, etc, so that an appropriate solution can be recommended.

[m_hutley]

@mike324

Apologies for not being able to offer anything codewise to work with.

Well, presumably you can at least show us what your table code looks like.

Other than that, as Paul says, any information provided will help.

[mike324]

m_huntley and Paul_Wilkins

The entire table is quite large for posting but here are more details:

I have a number of rows which take personal name and address details: name, address1, address2, town, country.

I also need to take the user’s billing name and address.

What I want to do is just present one set of rows and offer the user a checkbox saying “Are your billing details the same as your personal details?” As this is the case 99% of the time, the checkbox is checked by default. If the user UNchecks it, I’d like another set of rows to appear (all with the same labels… name, address1, address 2, etc., for him/her to fill in with these different details.

I could (as some types do) just put both sets of rows on the page with the checkbox and expect the user to just ignore the billing set if they ARE the same. It just grates on me slightly: messy. If the rows are not required, I’d rather not show them.

To test: literally just work with this…

Name:
Address1:
	Billing same...?

OK? Three rows here. Would like to repeat the first two (minus content) if user unchecks checkbox. Or feel free, if you have a better way, to suggest but please remember my JS is embryonic.

Cheers

[m3g4p0p]

@mike324

If the user UNchecks it, I’d like another set of rows to appear (all with the same labels… name, address1, address 2, etc., for him/her to fill in with these different details.

Hi @mike324, that sounds like you’d actually want to display a form after the table with the personal details, not another table. Anyway the general approach would be adding an event listener to the checkbox to toggle the hidden state of the billing details:

HTML

<table id="personal-details">...</table>
<input type="checkbox" id="toggle-billing" checked>
<form id="billing-details" hidden>...</form>

JS

const toggleBilling = document.getElementById('toggle-billing')
const billingDetails = document.getElementById('billing-details')

toggleBilling.addEventListener('change', () => {
  billingDetails.hidden = toggleBilling.checked
})

Also I’d just render that form statically TBH, rather than trying to generate its fields from the table headers or something.

[mike324]

m3g4p0p,

That sounds like exactly what I need. I get that.

The rows for personal details are a table within a form (they need entering too). Would have been cleaner with CSS instead of table but I know I could add/delete table rows with JS so went the table for layout route. But yes, just hiding it rather than generating it… simple but strong idea.

I’ll let you know how I get on with that.