Add class based on checked checkbox [closed]
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
4
down vote
favorite
I am looking to simplify this code as it is to bulky for what it is doing. I do not need to stick to jQuery.
Simple checkbox in html relates to adding underline to some text:
$("#houseOrCar").on("change", function ()
if ($(this).is(":checked") )
$("#houseChosen").css("text-decoration", "none");
$("#carChosen").css("text-decoration", "underline");
else
$("#houseChosen").css("text-decoration", "underline");
$("#carChosen").css("text-decoration", "none");
;
);
javascript
closed as off-topic by Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian Jun 23 at 5:53
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." â Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian
add a comment |Â
up vote
4
down vote
favorite
I am looking to simplify this code as it is to bulky for what it is doing. I do not need to stick to jQuery.
Simple checkbox in html relates to adding underline to some text:
$("#houseOrCar").on("change", function ()
if ($(this).is(":checked") )
$("#houseChosen").css("text-decoration", "none");
$("#carChosen").css("text-decoration", "underline");
else
$("#houseChosen").css("text-decoration", "underline");
$("#carChosen").css("text-decoration", "none");
;
);
javascript
closed as off-topic by Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian Jun 23 at 5:53
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." â Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian
add a comment |Â
up vote
4
down vote
favorite
up vote
4
down vote
favorite
I am looking to simplify this code as it is to bulky for what it is doing. I do not need to stick to jQuery.
Simple checkbox in html relates to adding underline to some text:
$("#houseOrCar").on("change", function ()
if ($(this).is(":checked") )
$("#houseChosen").css("text-decoration", "none");
$("#carChosen").css("text-decoration", "underline");
else
$("#houseChosen").css("text-decoration", "underline");
$("#carChosen").css("text-decoration", "none");
;
);
javascript
I am looking to simplify this code as it is to bulky for what it is doing. I do not need to stick to jQuery.
Simple checkbox in html relates to adding underline to some text:
$("#houseOrCar").on("change", function ()
if ($(this).is(":checked") )
$("#houseChosen").css("text-decoration", "none");
$("#carChosen").css("text-decoration", "underline");
else
$("#houseChosen").css("text-decoration", "underline");
$("#carChosen").css("text-decoration", "none");
;
);
javascript
asked Jun 22 at 11:13
user007
232
232
closed as off-topic by Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian Jun 23 at 5:53
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." â Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian
closed as off-topic by Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian Jun 23 at 5:53
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." â Toby Speight, Billal BEGUERADJ, Daniel, Sam Onela, Raystafarian
add a comment |Â
add a comment |Â
1 Answer
1
active
oldest
votes
up vote
4
down vote
accepted
You could use a class that would only hold the property for the active element, in our case text-decoration: underline;
. Then simply toggle each of the two labels to set on and off this "active" class (here called underline
).
So you don't need to know which label is which, both will toggle anyway. Just set one of the two to have the class .underline
on page load.
Plain JavaScript
const toggle = () => document.querySelectorAll('#labels > div')
.forEach(label => label.classList.toggle('underline'))
document.querySelector('#houseOrCar').addEventListener('change', toggle);
.underline
text-decoration: underline;
<input type="checkbox" id="houseOrCar">
<div id="labels">
<div class="underline">HOUSE</div>
<div>CAR</div>
</div>
Note I'm using the .forEach
method of the nodeList
class:
The forEach() method of the NodeList interface calls the callback given in parameter once for each value pair in the list, in insertion order.
jQuery
And here it is implemented with jQuery, which is shorter but very similar:
const toggle = () => $('#labels > div')
.each((i,e) => $(e).toggleClass('underline'));
$('#houseOrCar').on('change', toggle);
.underline
text-decoration: underline;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="houseOrCar">
<div id="labels">
<div class="underline">HOUSE</div>
<div>CAR</div>
</div>
It's not worth using jQuery for this, personally, I would stick with the plain version. However, if you happen to already use jQuery in your project then go for it!
You're welcome!
â Ivan
Jun 22 at 12:22
add a comment |Â
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
4
down vote
accepted
You could use a class that would only hold the property for the active element, in our case text-decoration: underline;
. Then simply toggle each of the two labels to set on and off this "active" class (here called underline
).
So you don't need to know which label is which, both will toggle anyway. Just set one of the two to have the class .underline
on page load.
Plain JavaScript
const toggle = () => document.querySelectorAll('#labels > div')
.forEach(label => label.classList.toggle('underline'))
document.querySelector('#houseOrCar').addEventListener('change', toggle);
.underline
text-decoration: underline;
<input type="checkbox" id="houseOrCar">
<div id="labels">
<div class="underline">HOUSE</div>
<div>CAR</div>
</div>
Note I'm using the .forEach
method of the nodeList
class:
The forEach() method of the NodeList interface calls the callback given in parameter once for each value pair in the list, in insertion order.
jQuery
And here it is implemented with jQuery, which is shorter but very similar:
const toggle = () => $('#labels > div')
.each((i,e) => $(e).toggleClass('underline'));
$('#houseOrCar').on('change', toggle);
.underline
text-decoration: underline;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="houseOrCar">
<div id="labels">
<div class="underline">HOUSE</div>
<div>CAR</div>
</div>
It's not worth using jQuery for this, personally, I would stick with the plain version. However, if you happen to already use jQuery in your project then go for it!
You're welcome!
â Ivan
Jun 22 at 12:22
add a comment |Â
up vote
4
down vote
accepted
You could use a class that would only hold the property for the active element, in our case text-decoration: underline;
. Then simply toggle each of the two labels to set on and off this "active" class (here called underline
).
So you don't need to know which label is which, both will toggle anyway. Just set one of the two to have the class .underline
on page load.
Plain JavaScript
const toggle = () => document.querySelectorAll('#labels > div')
.forEach(label => label.classList.toggle('underline'))
document.querySelector('#houseOrCar').addEventListener('change', toggle);
.underline
text-decoration: underline;
<input type="checkbox" id="houseOrCar">
<div id="labels">
<div class="underline">HOUSE</div>
<div>CAR</div>
</div>
Note I'm using the .forEach
method of the nodeList
class:
The forEach() method of the NodeList interface calls the callback given in parameter once for each value pair in the list, in insertion order.
jQuery
And here it is implemented with jQuery, which is shorter but very similar:
const toggle = () => $('#labels > div')
.each((i,e) => $(e).toggleClass('underline'));
$('#houseOrCar').on('change', toggle);
.underline
text-decoration: underline;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="houseOrCar">
<div id="labels">
<div class="underline">HOUSE</div>
<div>CAR</div>
</div>
It's not worth using jQuery for this, personally, I would stick with the plain version. However, if you happen to already use jQuery in your project then go for it!
You're welcome!
â Ivan
Jun 22 at 12:22
add a comment |Â
up vote
4
down vote
accepted
up vote
4
down vote
accepted
You could use a class that would only hold the property for the active element, in our case text-decoration: underline;
. Then simply toggle each of the two labels to set on and off this "active" class (here called underline
).
So you don't need to know which label is which, both will toggle anyway. Just set one of the two to have the class .underline
on page load.
Plain JavaScript
const toggle = () => document.querySelectorAll('#labels > div')
.forEach(label => label.classList.toggle('underline'))
document.querySelector('#houseOrCar').addEventListener('change', toggle);
.underline
text-decoration: underline;
<input type="checkbox" id="houseOrCar">
<div id="labels">
<div class="underline">HOUSE</div>
<div>CAR</div>
</div>
Note I'm using the .forEach
method of the nodeList
class:
The forEach() method of the NodeList interface calls the callback given in parameter once for each value pair in the list, in insertion order.
jQuery
And here it is implemented with jQuery, which is shorter but very similar:
const toggle = () => $('#labels > div')
.each((i,e) => $(e).toggleClass('underline'));
$('#houseOrCar').on('change', toggle);
.underline
text-decoration: underline;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="houseOrCar">
<div id="labels">
<div class="underline">HOUSE</div>
<div>CAR</div>
</div>
It's not worth using jQuery for this, personally, I would stick with the plain version. However, if you happen to already use jQuery in your project then go for it!
You could use a class that would only hold the property for the active element, in our case text-decoration: underline;
. Then simply toggle each of the two labels to set on and off this "active" class (here called underline
).
So you don't need to know which label is which, both will toggle anyway. Just set one of the two to have the class .underline
on page load.
Plain JavaScript
const toggle = () => document.querySelectorAll('#labels > div')
.forEach(label => label.classList.toggle('underline'))
document.querySelector('#houseOrCar').addEventListener('change', toggle);
.underline
text-decoration: underline;
<input type="checkbox" id="houseOrCar">
<div id="labels">
<div class="underline">HOUSE</div>
<div>CAR</div>
</div>
Note I'm using the .forEach
method of the nodeList
class:
The forEach() method of the NodeList interface calls the callback given in parameter once for each value pair in the list, in insertion order.
jQuery
And here it is implemented with jQuery, which is shorter but very similar:
const toggle = () => $('#labels > div')
.each((i,e) => $(e).toggleClass('underline'));
$('#houseOrCar').on('change', toggle);
.underline
text-decoration: underline;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="houseOrCar">
<div id="labels">
<div class="underline">HOUSE</div>
<div>CAR</div>
</div>
It's not worth using jQuery for this, personally, I would stick with the plain version. However, if you happen to already use jQuery in your project then go for it!
const toggle = () => document.querySelectorAll('#labels > div')
.forEach(label => label.classList.toggle('underline'))
document.querySelector('#houseOrCar').addEventListener('change', toggle);
.underline
text-decoration: underline;
<input type="checkbox" id="houseOrCar">
<div id="labels">
<div class="underline">HOUSE</div>
<div>CAR</div>
</div>
const toggle = () => document.querySelectorAll('#labels > div')
.forEach(label => label.classList.toggle('underline'))
document.querySelector('#houseOrCar').addEventListener('change', toggle);
.underline
text-decoration: underline;
<input type="checkbox" id="houseOrCar">
<div id="labels">
<div class="underline">HOUSE</div>
<div>CAR</div>
</div>
const toggle = () => $('#labels > div')
.each((i,e) => $(e).toggleClass('underline'));
$('#houseOrCar').on('change', toggle);
.underline
text-decoration: underline;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="houseOrCar">
<div id="labels">
<div class="underline">HOUSE</div>
<div>CAR</div>
</div>
const toggle = () => $('#labels > div')
.each((i,e) => $(e).toggleClass('underline'));
$('#houseOrCar').on('change', toggle);
.underline
text-decoration: underline;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="houseOrCar">
<div id="labels">
<div class="underline">HOUSE</div>
<div>CAR</div>
</div>
edited Jun 22 at 11:55
answered Jun 22 at 11:44
Ivan
33511
33511
You're welcome!
â Ivan
Jun 22 at 12:22
add a comment |Â
You're welcome!
â Ivan
Jun 22 at 12:22
You're welcome!
â Ivan
Jun 22 at 12:22
You're welcome!
â Ivan
Jun 22 at 12:22
add a comment |Â