CODEWITHSUNDEEP
javascriptjqueryhtmlformscheckbox
Andre Simmons
Andre Simmons

Reputation: 13

How do you modify the label of checkboxes in a dynamically generated table?

I am new to javascript/Jquery and have the following issue:

I am trying to modify the label of the checkboxes in a dynamically generated table :

<td>
<input type="checkbox"> <b>$18,000.00</b> ($18000+) Diamond Sponsor<br>
<input type="checkbox"> <b>$10,000.00</b> ($10000+) Ruby Sponsor<br>
<input type="checkbox"> <b>$5000.00</b> ($5000+) Emerald Sponsor<br>
<input type="checkbox"> <b>$3600.00</b> ($3600+) Gold Sponsor<br>
<input type="checkbox"> <b>$1800.00</b> ($1800+) Silver Sponsor<br>
<input type="checkbox"> <b>$1000.00</b> ($1000+) Bronze Sponsor<br>
<input type="checkbox"> <b>$500.00</b> ($500+) Pillar<br>
<input type="checkbox"> <b>$250.00</b> ($250+) Patron<br>
<input type="checkbox"> <b>$180.00</b> ($180+) Supporter<br>
<input type="checkbox"> <b>$100.00</b> ($100+) Friend<br>
<input type="checkbox"> <b>$50.00</b> ($50+) Donor<br>
<input type="checkbox"> <b>$25.00</b> ($25+) Donor<br>
</td>

I need to hide part of the label text for each of the inputs when it displays. Specifically the numbers surrounded by the parenthesis.

Currently this is how it looks:

$18,000.00 ($18000+) Diamond Sponsor
$10,000.00 ($10000+) Ruby Sponsor
$5000.00 ($5000+) Emerald Sponsor
$3600.00 ($3600+) Gold Sponsor
$1800.00 ($1800+) Silver Sponsor
$1000.00 ($1000+) Bronze Sponsor
$500.00 ($500+) Pillar
$250.00 ($250+) Patron
$180.00 ($180+) Supporter
$100.00 ($100+) Friend
$50.00 ($50+) Donor
$25.00 ($25+) Donor

How can I remove the numbers including the parenthesis from input label but leave the rest of the label intact.

Any help is greatly appreciated

Upvotes: 0

Views: 96

Answers (2)

j08691
j08691

Reputation: 207923

Use:

jQuery:

$('td').html(function (_, html) {
    return html.replace(/(\(.*\))/ig, '<span class="hide">$1</span>');
});

CSS:

.hide {
    display:none;
}

jsFiddle example

Upvotes: 2

Ankit Tyagi
Ankit Tyagi

Reputation: 2375

<input type="checkbox"> <span><b>$18,000.00</b> ($18000+)</span> Diamond Sponsor<br>

$('input:checkbox').on('change',function(){

   $(this).closest('span').toggle();
});

Upvotes: 0

Related Questions