Using jQuery to set the class of an element corresponding to the selected radio button
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
2
down vote
favorite
I'm a bit of a newb with jQuery but can get it working to perform the functionality that I'm after.
The below function checks the value of the radio input and then adds a class, depending on the selection. But it feels like there is a more efficient way of writing this.
$('input[name=choice]').change(function()
var inputVal = $('input[name=choice]:checked').val();
if(inputVal == 'Option A')
$(".img-wrapper").addClass('option-a');
else
$(".img-wrapper").removeClass('option-a');
if(inputVal == 'Option B')
$(".img-wrapper").addClass('option-b');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-b');
if(inputVal == 'Option C')
$(".img-wrapper").addClass('option-c');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-c');
if(inputVal == 'Option D')
$(".img-wrapper").addClass('option-d');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-d');
);<div class="view-choice">
<input type="radio" name="choice" value="Option A">
<input type="radio" name="choice" value="Option B">
<input type="radio" name="choice" value="Option C">
<input type="radio" name="choice" value="Option D">
</div>
<div class="img-wrapper option-a"></div>
https://jsfiddle.net/fhaLztL6/
javascript beginner jquery form
edited Feb 6 at 13:21
200_success
123k14143401
asked Feb 6 at 11:10
AFK
134
add a comment |Â
up vote
2
down vote
favorite
I'm a bit of a newb with jQuery but can get it working to perform the functionality that I'm after.
The below function checks the value of the radio input and then adds a class, depending on the selection. But it feels like there is a more efficient way of writing this.
$('input[name=choice]').change(function()
var inputVal = $('input[name=choice]:checked').val();
if(inputVal == 'Option A')
$(".img-wrapper").addClass('option-a');
else
$(".img-wrapper").removeClass('option-a');
if(inputVal == 'Option B')
$(".img-wrapper").addClass('option-b');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-b');
if(inputVal == 'Option C')
$(".img-wrapper").addClass('option-c');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-c');
if(inputVal == 'Option D')
$(".img-wrapper").addClass('option-d');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-d');
);<div class="view-choice">
<input type="radio" name="choice" value="Option A">
<input type="radio" name="choice" value="Option B">
<input type="radio" name="choice" value="Option C">
<input type="radio" name="choice" value="Option D">
</div>
<div class="img-wrapper option-a"></div>
https://jsfiddle.net/fhaLztL6/
javascript beginner jquery form
edited Feb 6 at 13:21
200_success
123k14143401
asked Feb 6 at 11:10
AFK
134
why only removing one class ? If I get it right, you need to remove all other 3 classes. Am I right?
– I R Shad
Feb 6 at 11:31
Sorry, I should have been clearer - the .img-wrapper has the class of option-a added when the page is loaded. I'll edit my question to show my HTML
– AFK
Feb 6 at 11:39
Welcome to Code Review! I suggest including the relevant CSS in the question itself. The more realistic, the better.
– 200_success
Feb 6 at 13:23
add a comment |Â
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I'm a bit of a newb with jQuery but can get it working to perform the functionality that I'm after.
The below function checks the value of the radio input and then adds a class, depending on the selection. But it feels like there is a more efficient way of writing this.
$('input[name=choice]').change(function()
var inputVal = $('input[name=choice]:checked').val();
if(inputVal == 'Option A')
$(".img-wrapper").addClass('option-a');
else
$(".img-wrapper").removeClass('option-a');
if(inputVal == 'Option B')
$(".img-wrapper").addClass('option-b');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-b');
if(inputVal == 'Option C')
$(".img-wrapper").addClass('option-c');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-c');
if(inputVal == 'Option D')
$(".img-wrapper").addClass('option-d');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-d');
);<div class="view-choice">
<input type="radio" name="choice" value="Option A">
<input type="radio" name="choice" value="Option B">
<input type="radio" name="choice" value="Option C">
<input type="radio" name="choice" value="Option D">
</div>
<div class="img-wrapper option-a"></div>
https://jsfiddle.net/fhaLztL6/
javascript beginner jquery form
edited Feb 6 at 13:21
200_success
123k14143401
asked Feb 6 at 11:10
AFK
134
I'm a bit of a newb with jQuery but can get it working to perform the functionality that I'm after.
The below function checks the value of the radio input and then adds a class, depending on the selection. But it feels like there is a more efficient way of writing this.
$('input[name=choice]').change(function()
var inputVal = $('input[name=choice]:checked').val();
if(inputVal == 'Option A')
$(".img-wrapper").addClass('option-a');
else
$(".img-wrapper").removeClass('option-a');
if(inputVal == 'Option B')
$(".img-wrapper").addClass('option-b');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-b');
if(inputVal == 'Option C')
$(".img-wrapper").addClass('option-c');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-c');
if(inputVal == 'Option D')
$(".img-wrapper").addClass('option-d');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-d');
);<div class="view-choice">
<input type="radio" name="choice" value="Option A">
<input type="radio" name="choice" value="Option B">
<input type="radio" name="choice" value="Option C">
<input type="radio" name="choice" value="Option D">
</div>
<div class="img-wrapper option-a"></div>
https://jsfiddle.net/fhaLztL6/
$('input[name=choice]').change(function()
var inputVal = $('input[name=choice]:checked').val();
if(inputVal == 'Option A')
$(".img-wrapper").addClass('option-a');
else
$(".img-wrapper").removeClass('option-a');
if(inputVal == 'Option B')
$(".img-wrapper").addClass('option-b');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-b');
if(inputVal == 'Option C')
$(".img-wrapper").addClass('option-c');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-c');
if(inputVal == 'Option D')
$(".img-wrapper").addClass('option-d');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-d');
);<div class="view-choice">
<input type="radio" name="choice" value="Option A">
<input type="radio" name="choice" value="Option B">
<input type="radio" name="choice" value="Option C">
<input type="radio" name="choice" value="Option D">
</div>
<div class="img-wrapper option-a"></div>
$('input[name=choice]').change(function()
var inputVal = $('input[name=choice]:checked').val();
if(inputVal == 'Option A')
$(".img-wrapper").addClass('option-a');
else
$(".img-wrapper").removeClass('option-a');
if(inputVal == 'Option B')
$(".img-wrapper").addClass('option-b');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-b');
if(inputVal == 'Option C')
$(".img-wrapper").addClass('option-c');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-c');
if(inputVal == 'Option D')
$(".img-wrapper").addClass('option-d');
$(".img-wrapper").removeClass('option-a');
else
$(".img-wrapper").removeClass('option-d');
);<div class="view-choice">
<input type="radio" name="choice" value="Option A">
<input type="radio" name="choice" value="Option B">
<input type="radio" name="choice" value="Option C">
<input type="radio" name="choice" value="Option D">
</div>
<div class="img-wrapper option-a"></div>
javascript beginner jquery form
edited Feb 6 at 13:21
200_success
123k14143401
asked Feb 6 at 11:10
AFK
134
edited Feb 6 at 13:21
200_success
123k14143401
edited Feb 6 at 13:21
200_success
123k14143401
edited Feb 6 at 13:21
200_success
123k14143401
123k14143401
asked Feb 6 at 11:10
AFK
134
asked Feb 6 at 11:10
AFK
134
asked Feb 6 at 11:10
AFK
134
134
why only removing one class ? If I get it right, you need to remove all other 3 classes. Am I right?
– I R Shad
Feb 6 at 11:31
Sorry, I should have been clearer - the .img-wrapper has the class of option-a added when the page is loaded. I'll edit my question to show my HTML
– AFK
Feb 6 at 11:39
Welcome to Code Review! I suggest including the relevant CSS in the question itself. The more realistic, the better.
– 200_success
Feb 6 at 13:23
add a comment |Â
why only removing one class ? If I get it right, you need to remove all other 3 classes. Am I right?
– I R Shad
Feb 6 at 11:31
Sorry, I should have been clearer - the .img-wrapper has the class of option-a added when the page is loaded. I'll edit my question to show my HTML
– AFK
Feb 6 at 11:39
Welcome to Code Review! I suggest including the relevant CSS in the question itself. The more realistic, the better.
– 200_success
Feb 6 at 13:23
why only removing one class ? If I get it right, you need to remove all other 3 classes. Am I right?
– I R Shad
Feb 6 at 11:31
why only removing one class ? If I get it right, you need to remove all other 3 classes. Am I right?
– I R Shad
Feb 6 at 11:31
Sorry, I should have been clearer - the .img-wrapper has the class of option-a added when the page is loaded. I'll edit my question to show my HTML
– AFK
Feb 6 at 11:39
Sorry, I should have been clearer - the .img-wrapper has the class of option-a added when the page is loaded. I'll edit my question to show my HTML
– AFK
Feb 6 at 11:39
Welcome to Code Review! I suggest including the relevant CSS in the question itself. The more realistic, the better.
– 200_success
Feb 6 at 13:23
Welcome to Code Review! I suggest including the relevant CSS in the question itself. The more realistic, the better.
– 200_success
Feb 6 at 13:23
add a comment |Â
3 Answers
3
active
oldest
votes
up vote
0
down vote
accepted
How about a 2 liner solution where you can convert the value using regex and toLowerCase() to transform the value into class name and instead of creating separate checks for every option where you would have to update the code every time your options increase in case they are coming from the databases.
$('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
You should override all the classes and just provide the default class with the selected so rather than using
$(".img-wrapper").addClass('option-d');
$(".img-wrapper").removeClass('option-a');
using the following approach will override the previously applied any class and adds the new class.
.attr('class','img-wrapper '+className);
So all your code sum up to 3 lines.
$('input[name=choice]').change(function()
var className = $('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
$(".img-wrapper").attr('class', 'img-wrapper ' + className);
);
$('input[name=choice]').change(function()
var className = $('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
$(".img-wrapper").attr('class', 'img-wrapper ' + className);
);.img-wrapper
background-color: #000 !important;
width: 50px;
height: 50px;
.option-a
background-color: #E91E63 !important;
.option-b
background-color: #607D8B !important;
.option-c
background-color: #FF9800 !important;
.option-d
background-color: #4CAF50 !important
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<input type="radio" name="choice" value="Option A">
<input type="radio" name="choice" value="Option B">
<input type="radio" name="choice" value="Option C">
<input type="radio" name="choice" value="Option D">
</div>
<div class="img-wrapper"></div>answered Feb 7 at 10:31
Muhammad Omer Aslam
171110
This is exactly the kind of thing I was after, thank you!
– AFK
Feb 9 at 9:05
@AFK glad I could interpret what you wanted, a vote up would get me excited (âŒÂ■_■)
– Muhammad Omer Aslam
Feb 9 at 10:07
add a comment |Â
up vote
1
down vote
You could use labels for your radio inputs and use the actual class names for the values. Then on change, you'd just remove all the option classes and pass in your inputVal for the class to add. See the snippet below (colors added to the classes via CSS and text added in .img-wrapper to show it working).
$('input[name=choice]').change(function()
var inputVal = $('input[name=choice]:checked').val();
$(".img-wrapper")
.removeClass('option-a option-b option-c option-d')
.addClass(inputVal);
);.option-a
color: red;
.option-b
color: green;
.option-c
color: blue;
.option-d
color: yellow;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<label for="option-a">Option A</label>
<input type="radio" name="choice" value="option-a" checked>
<label for="option-b">Option B</label>
<input type="radio" name="choice" value="option-b">
<label for="option-c">Option C</label>
<input type="radio" name="choice" value="option-c">
<label for="option-d">Option D</label>
<input type="radio" name="choice" value="option-d">
</div>
<div class="img-wrapper option-a">Blah</div>answered Feb 6 at 15:21
ReeseyCup
234
add a comment |Â
up vote
1
down vote
There is a useful jQuery method named toggleClass. Instead of:
if(inputVal == 'Option A')
$(".img-wrapper").addClass('option-a');
else
$(".img-wrapper").removeClass('option-a');
you can just write:
$(".img-wrapper").toggleClass('option-a', inputVal == 'Option A');
answered Feb 6 at 16:11
Marc Rohloff
2,57735
add a comment |Â
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
How about a 2 liner solution where you can convert the value using regex and toLowerCase() to transform the value into class name and instead of creating separate checks for every option where you would have to update the code every time your options increase in case they are coming from the databases.
$('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
You should override all the classes and just provide the default class with the selected so rather than using
$(".img-wrapper").addClass('option-d');
$(".img-wrapper").removeClass('option-a');
using the following approach will override the previously applied any class and adds the new class.
.attr('class','img-wrapper '+className);
So all your code sum up to 3 lines.
$('input[name=choice]').change(function()
var className = $('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
$(".img-wrapper").attr('class', 'img-wrapper ' + className);
);
$('input[name=choice]').change(function()
var className = $('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
$(".img-wrapper").attr('class', 'img-wrapper ' + className);
);.img-wrapper
background-color: #000 !important;
width: 50px;
height: 50px;
.option-a
background-color: #E91E63 !important;
.option-b
background-color: #607D8B !important;
.option-c
background-color: #FF9800 !important;
.option-d
background-color: #4CAF50 !important
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<input type="radio" name="choice" value="Option A">
<input type="radio" name="choice" value="Option B">
<input type="radio" name="choice" value="Option C">
<input type="radio" name="choice" value="Option D">
</div>
<div class="img-wrapper"></div>answered Feb 7 at 10:31
Muhammad Omer Aslam
171110
This is exactly the kind of thing I was after, thank you!
– AFK
Feb 9 at 9:05
@AFK glad I could interpret what you wanted, a vote up would get me excited (âŒÂ■_■)
– Muhammad Omer Aslam
Feb 9 at 10:07
add a comment |Â
up vote
0
down vote
accepted
How about a 2 liner solution where you can convert the value using regex and toLowerCase() to transform the value into class name and instead of creating separate checks for every option where you would have to update the code every time your options increase in case they are coming from the databases.
$('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
You should override all the classes and just provide the default class with the selected so rather than using
$(".img-wrapper").addClass('option-d');
$(".img-wrapper").removeClass('option-a');
using the following approach will override the previously applied any class and adds the new class.
.attr('class','img-wrapper '+className);
So all your code sum up to 3 lines.
$('input[name=choice]').change(function()
var className = $('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
$(".img-wrapper").attr('class', 'img-wrapper ' + className);
);
$('input[name=choice]').change(function()
var className = $('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
$(".img-wrapper").attr('class', 'img-wrapper ' + className);
);.img-wrapper
background-color: #000 !important;
width: 50px;
height: 50px;
.option-a
background-color: #E91E63 !important;
.option-b
background-color: #607D8B !important;
.option-c
background-color: #FF9800 !important;
.option-d
background-color: #4CAF50 !important
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<input type="radio" name="choice" value="Option A">
<input type="radio" name="choice" value="Option B">
<input type="radio" name="choice" value="Option C">
<input type="radio" name="choice" value="Option D">
</div>
<div class="img-wrapper"></div>answered Feb 7 at 10:31
Muhammad Omer Aslam
171110
This is exactly the kind of thing I was after, thank you!
– AFK
Feb 9 at 9:05
@AFK glad I could interpret what you wanted, a vote up would get me excited (âŒÂ■_■)
– Muhammad Omer Aslam
Feb 9 at 10:07
add a comment |Â
up vote
0
down vote
accepted
up vote
0
down vote
accepted
How about a 2 liner solution where you can convert the value using regex and toLowerCase() to transform the value into class name and instead of creating separate checks for every option where you would have to update the code every time your options increase in case they are coming from the databases.
$('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
You should override all the classes and just provide the default class with the selected so rather than using
$(".img-wrapper").addClass('option-d');
$(".img-wrapper").removeClass('option-a');
using the following approach will override the previously applied any class and adds the new class.
.attr('class','img-wrapper '+className);
So all your code sum up to 3 lines.
$('input[name=choice]').change(function()
var className = $('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
$(".img-wrapper").attr('class', 'img-wrapper ' + className);
);
$('input[name=choice]').change(function()
var className = $('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
$(".img-wrapper").attr('class', 'img-wrapper ' + className);
);.img-wrapper
background-color: #000 !important;
width: 50px;
height: 50px;
.option-a
background-color: #E91E63 !important;
.option-b
background-color: #607D8B !important;
.option-c
background-color: #FF9800 !important;
.option-d
background-color: #4CAF50 !important
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<input type="radio" name="choice" value="Option A">
<input type="radio" name="choice" value="Option B">
<input type="radio" name="choice" value="Option C">
<input type="radio" name="choice" value="Option D">
</div>
<div class="img-wrapper"></div>answered Feb 7 at 10:31
Muhammad Omer Aslam
171110
How about a 2 liner solution where you can convert the value using regex and toLowerCase() to transform the value into class name and instead of creating separate checks for every option where you would have to update the code every time your options increase in case they are coming from the databases.
$('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
You should override all the classes and just provide the default class with the selected so rather than using
$(".img-wrapper").addClass('option-d');
$(".img-wrapper").removeClass('option-a');
using the following approach will override the previously applied any class and adds the new class.
.attr('class','img-wrapper '+className);
So all your code sum up to 3 lines.
$('input[name=choice]').change(function()
var className = $('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
$(".img-wrapper").attr('class', 'img-wrapper ' + className);
);
$('input[name=choice]').change(function()
var className = $('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
$(".img-wrapper").attr('class', 'img-wrapper ' + className);
);.img-wrapper
background-color: #000 !important;
width: 50px;
height: 50px;
.option-a
background-color: #E91E63 !important;
.option-b
background-color: #607D8B !important;
.option-c
background-color: #FF9800 !important;
.option-d
background-color: #4CAF50 !important
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<input type="radio" name="choice" value="Option A">
<input type="radio" name="choice" value="Option B">
<input type="radio" name="choice" value="Option C">
<input type="radio" name="choice" value="Option D">
</div>
<div class="img-wrapper"></div>$('input[name=choice]').change(function()
var className = $('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
$(".img-wrapper").attr('class', 'img-wrapper ' + className);
);.img-wrapper
background-color: #000 !important;
width: 50px;
height: 50px;
.option-a
background-color: #E91E63 !important;
.option-b
background-color: #607D8B !important;
.option-c
background-color: #FF9800 !important;
.option-d
background-color: #4CAF50 !important
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<input type="radio" name="choice" value="Option A">
<input type="radio" name="choice" value="Option B">
<input type="radio" name="choice" value="Option C">
<input type="radio" name="choice" value="Option D">
</div>
<div class="img-wrapper"></div>$('input[name=choice]').change(function()
var className = $('input[name=choice]:checked').val().toLowerCase().replace(/s+/, "-");
$(".img-wrapper").attr('class', 'img-wrapper ' + className);
);.img-wrapper
background-color: #000 !important;
width: 50px;
height: 50px;
.option-a
background-color: #E91E63 !important;
.option-b
background-color: #607D8B !important;
.option-c
background-color: #FF9800 !important;
.option-d
background-color: #4CAF50 !important
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<input type="radio" name="choice" value="Option A">
<input type="radio" name="choice" value="Option B">
<input type="radio" name="choice" value="Option C">
<input type="radio" name="choice" value="Option D">
</div>
<div class="img-wrapper"></div>answered Feb 7 at 10:31
Muhammad Omer Aslam
171110
edited Feb 10 at 22:19
answered Feb 7 at 10:31
Muhammad Omer Aslam
171110
answered Feb 7 at 10:31
Muhammad Omer Aslam
171110
answered Feb 7 at 10:31
Muhammad Omer Aslam
171110
171110
This is exactly the kind of thing I was after, thank you!
– AFK
Feb 9 at 9:05
@AFK glad I could interpret what you wanted, a vote up would get me excited (âŒÂ■_■)
– Muhammad Omer Aslam
Feb 9 at 10:07
add a comment |Â
This is exactly the kind of thing I was after, thank you!
– AFK
Feb 9 at 9:05
@AFK glad I could interpret what you wanted, a vote up would get me excited (âŒÂ■_■)
– Muhammad Omer Aslam
Feb 9 at 10:07
This is exactly the kind of thing I was after, thank you!
– AFK
Feb 9 at 9:05
This is exactly the kind of thing I was after, thank you!
– AFK
Feb 9 at 9:05
@AFK glad I could interpret what you wanted, a vote up would get me excited (âŒÂ■_■)
– Muhammad Omer Aslam
Feb 9 at 10:07
@AFK glad I could interpret what you wanted, a vote up would get me excited (âŒÂ■_■)
– Muhammad Omer Aslam
Feb 9 at 10:07
add a comment |Â
up vote
1
down vote
You could use labels for your radio inputs and use the actual class names for the values. Then on change, you'd just remove all the option classes and pass in your inputVal for the class to add. See the snippet below (colors added to the classes via CSS and text added in .img-wrapper to show it working).
$('input[name=choice]').change(function()
var inputVal = $('input[name=choice]:checked').val();
$(".img-wrapper")
.removeClass('option-a option-b option-c option-d')
.addClass(inputVal);
);.option-a
color: red;
.option-b
color: green;
.option-c
color: blue;
.option-d
color: yellow;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<label for="option-a">Option A</label>
<input type="radio" name="choice" value="option-a" checked>
<label for="option-b">Option B</label>
<input type="radio" name="choice" value="option-b">
<label for="option-c">Option C</label>
<input type="radio" name="choice" value="option-c">
<label for="option-d">Option D</label>
<input type="radio" name="choice" value="option-d">
</div>
<div class="img-wrapper option-a">Blah</div>answered Feb 6 at 15:21
ReeseyCup
234
add a comment |Â
up vote
1
down vote
You could use labels for your radio inputs and use the actual class names for the values. Then on change, you'd just remove all the option classes and pass in your inputVal for the class to add. See the snippet below (colors added to the classes via CSS and text added in .img-wrapper to show it working).
$('input[name=choice]').change(function()
var inputVal = $('input[name=choice]:checked').val();
$(".img-wrapper")
.removeClass('option-a option-b option-c option-d')
.addClass(inputVal);
);.option-a
color: red;
.option-b
color: green;
.option-c
color: blue;
.option-d
color: yellow;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<label for="option-a">Option A</label>
<input type="radio" name="choice" value="option-a" checked>
<label for="option-b">Option B</label>
<input type="radio" name="choice" value="option-b">
<label for="option-c">Option C</label>
<input type="radio" name="choice" value="option-c">
<label for="option-d">Option D</label>
<input type="radio" name="choice" value="option-d">
</div>
<div class="img-wrapper option-a">Blah</div>answered Feb 6 at 15:21
ReeseyCup
234
add a comment |Â
up vote
1
down vote
up vote
1
down vote
You could use labels for your radio inputs and use the actual class names for the values. Then on change, you'd just remove all the option classes and pass in your inputVal for the class to add. See the snippet below (colors added to the classes via CSS and text added in .img-wrapper to show it working).
$('input[name=choice]').change(function()
var inputVal = $('input[name=choice]:checked').val();
$(".img-wrapper")
.removeClass('option-a option-b option-c option-d')
.addClass(inputVal);
);.option-a
color: red;
.option-b
color: green;
.option-c
color: blue;
.option-d
color: yellow;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<label for="option-a">Option A</label>
<input type="radio" name="choice" value="option-a" checked>
<label for="option-b">Option B</label>
<input type="radio" name="choice" value="option-b">
<label for="option-c">Option C</label>
<input type="radio" name="choice" value="option-c">
<label for="option-d">Option D</label>
<input type="radio" name="choice" value="option-d">
</div>
<div class="img-wrapper option-a">Blah</div>answered Feb 6 at 15:21
ReeseyCup
234
You could use labels for your radio inputs and use the actual class names for the values. Then on change, you'd just remove all the option classes and pass in your inputVal for the class to add. See the snippet below (colors added to the classes via CSS and text added in .img-wrapper to show it working).
$('input[name=choice]').change(function()
var inputVal = $('input[name=choice]:checked').val();
$(".img-wrapper")
.removeClass('option-a option-b option-c option-d')
.addClass(inputVal);
);.option-a
color: red;
.option-b
color: green;
.option-c
color: blue;
.option-d
color: yellow;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<label for="option-a">Option A</label>
<input type="radio" name="choice" value="option-a" checked>
<label for="option-b">Option B</label>
<input type="radio" name="choice" value="option-b">
<label for="option-c">Option C</label>
<input type="radio" name="choice" value="option-c">
<label for="option-d">Option D</label>
<input type="radio" name="choice" value="option-d">
</div>
<div class="img-wrapper option-a">Blah</div>$('input[name=choice]').change(function()
var inputVal = $('input[name=choice]:checked').val();
$(".img-wrapper")
.removeClass('option-a option-b option-c option-d')
.addClass(inputVal);
);.option-a
color: red;
.option-b
color: green;
.option-c
color: blue;
.option-d
color: yellow;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<label for="option-a">Option A</label>
<input type="radio" name="choice" value="option-a" checked>
<label for="option-b">Option B</label>
<input type="radio" name="choice" value="option-b">
<label for="option-c">Option C</label>
<input type="radio" name="choice" value="option-c">
<label for="option-d">Option D</label>
<input type="radio" name="choice" value="option-d">
</div>
<div class="img-wrapper option-a">Blah</div>$('input[name=choice]').change(function()
var inputVal = $('input[name=choice]:checked').val();
$(".img-wrapper")
.removeClass('option-a option-b option-c option-d')
.addClass(inputVal);
);.option-a
color: red;
.option-b
color: green;
.option-c
color: blue;
.option-d
color: yellow;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-choice">
<label for="option-a">Option A</label>
<input type="radio" name="choice" value="option-a" checked>
<label for="option-b">Option B</label>
<input type="radio" name="choice" value="option-b">
<label for="option-c">Option C</label>
<input type="radio" name="choice" value="option-c">
<label for="option-d">Option D</label>
<input type="radio" name="choice" value="option-d">
</div>
<div class="img-wrapper option-a">Blah</div>answered Feb 6 at 15:21
ReeseyCup
234
answered Feb 6 at 15:21
ReeseyCup
234
answered Feb 6 at 15:21
ReeseyCup
234
answered Feb 6 at 15:21
ReeseyCup
234
234
add a comment |Â
add a comment |Â
up vote
1
down vote
There is a useful jQuery method named toggleClass. Instead of:
if(inputVal == 'Option A')
$(".img-wrapper").addClass('option-a');
else
$(".img-wrapper").removeClass('option-a');
you can just write:
$(".img-wrapper").toggleClass('option-a', inputVal == 'Option A');
answered Feb 6 at 16:11
Marc Rohloff
2,57735
add a comment |Â
up vote
1
down vote
There is a useful jQuery method named toggleClass. Instead of:
if(inputVal == 'Option A')
$(".img-wrapper").addClass('option-a');
else
$(".img-wrapper").removeClass('option-a');
you can just write:
$(".img-wrapper").toggleClass('option-a', inputVal == 'Option A');
answered Feb 6 at 16:11
Marc Rohloff
2,57735
add a comment |Â
up vote
1
down vote
up vote
1
down vote
There is a useful jQuery method named toggleClass. Instead of:
if(inputVal == 'Option A')
$(".img-wrapper").addClass('option-a');
else
$(".img-wrapper").removeClass('option-a');
you can just write:
$(".img-wrapper").toggleClass('option-a', inputVal == 'Option A');
answered Feb 6 at 16:11
Marc Rohloff
2,57735
There is a useful jQuery method named toggleClass. Instead of:
if(inputVal == 'Option A')
$(".img-wrapper").addClass('option-a');
else
$(".img-wrapper").removeClass('option-a');
you can just write:
$(".img-wrapper").toggleClass('option-a', inputVal == 'Option A');
answered Feb 6 at 16:11
Marc Rohloff
2,57735
answered Feb 6 at 16:11
Marc Rohloff
2,57735
answered Feb 6 at 16:11
Marc Rohloff
2,57735
answered Feb 6 at 16:11
Marc Rohloff
2,57735
2,57735
add a comment |Â
add a comment |Â
Â
draft saved
draft discarded
Â
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f186906%2fusing-jquery-to-set-the-class-of-an-element-corresponding-to-the-selected-radio%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
why only removing one class ? If I get it right, you need to remove all other 3 classes. Am I right?
– I R Shad
Feb 6 at 11:31
Sorry, I should have been clearer - the .img-wrapper has the class of option-a added when the page is loaded. I'll edit my question to show my HTML
– AFK
Feb 6 at 11:39
Welcome to Code Review! I suggest including the relevant CSS in the question itself. The more realistic, the better.
– 200_success
Feb 6 at 13:23