Using jQuery to style radio buttons

Question

I've been trying to style the following example so that the checked radio buttons are styled with different background-color when they are checked.

I've managed to put this together from other posts on SO as I don't know jQuery, as far as I can see there isn't a way to do this in pure CSS as the label is a parent of the input.

The HTML code cannot be changed as that is being output by an Shiny interface in R.

Currently the background will remain checked. I have tried styling both the checked and unchecked at once - but that did not seem to work.

 $('.radio-inline input').click(function(){ $('input[type="radio"]:checked').parent().css("background-color","#d10000").css("color","#FFF"); });

 .shiny-options-group { display: flex; justify-content: space-around; padding-left: 1px; padding-right: 1px; } .shiny-options-group label { float: left; } .shiny-options-group label { display: inline-block; width: 9%; background-color: #d2e9ef; color: #000; font-size: 14px; font-weight: bold; text-align: center; padding: 6px 14px; border: 1px solid #FFF; cursor: pointer; } .shiny-options-group input{ display: none; } label input[type="radio"]:checked ~ span { color: #FFF; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="div_Q1"> <div id="tb_Q"> <div id="Q1_text" class="shiny-html-output"></div> </div> <div id="tb_Qt"> <div id="Q1" class="shiny-html-output"></div> </div> <div id="div_ans"> <div id="Q1_Ans" class="form-group shiny-input-radiogroup shiny-input-container shiny-input-container-inline"> <div class="shiny-options-group"> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="1" checked="checked"/> <span>1</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="2"/> <span>2</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="3"/> <span>3</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="4"/> <span>4</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="5"/> <span>5</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="6"/> <span>6</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="7"/> <span>7</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="8"/> <span>8</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="9"/> <span>9</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="10"/> <span>10</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="11"/> <span>11</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="12"/> <span>12</span> </label> </div> </div> </div> </div> <div id="div_Q2"> <div id="tb_Q"> <div id="Q2_text" class="shiny-html-output"></div> </div> <div id="tb_Qt"> <div id="Q2" class="shiny-html-output"></div> </div> <div id="div_ans"> <div id="Q2_Ans" class="form-group shiny-input-radiogroup shiny-input-container shiny-input-container-inline"> <div class="shiny-options-group"> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="1" checked="checked"/> <span>1</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="2"/> <span>2</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="3"/> <span>3</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="4"/> <span>4</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="5"/> <span>5</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="6"/> <span>6</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="7"/> <span>7</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="8"/> <span>8</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="9"/> <span>9</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="10"/> <span>10</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="11"/> <span>11</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="12"/> <span>12</span> </label> </div> </div> </div> </div>

Answer 1

You can use .siblings() to toggle to background-color and color of sibling elements to current <label> element

 $('.radio-inline input').click(function(){ $('input[type="radio"]:checked').parent() .css({"background-color":"#d10000" , "color":"#FFF"}) .siblings() .css({"background-color":"#d2e9ef" , "color":"#000"}) });

 .shiny-options-group { display: flex; justify-content: space-around; padding-left: 1px; padding-right: 1px; } .shiny-options-group label { float: left; } .shiny-options-group label { display: inline-block; width: 9%; background-color: #d2e9ef; color: #000; font-size: 14px; font-weight: bold; text-align: center; padding: 6px 14px; border: 1px solid #FFF; cursor: pointer; } .shiny-options-group input{ display: none; } label input[type="radio"]:checked ~ span { color: #FFF; } label:checked { color: green; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="div_Q1"> <div id="tb_Q"> <div id="Q1_text" class="shiny-html-output"></div> </div> <div id="tb_Qt"> <div id="Q1" class="shiny-html-output"></div> </div> <div id="div_ans"> <div id="Q1_Ans" class="form-group shiny-input-radiogroup shiny-input-container shiny-input-container-inline"> <div class="shiny-options-group"> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="1" checked="checked"/> <span>1</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="2"/> <span>2</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="3"/> <span>3</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="4"/> <span>4</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="5"/> <span>5</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="6"/> <span>6</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="7"/> <span>7</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="8"/> <span>8</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="9"/> <span>9</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="10"/> <span>10</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="11"/> <span>11</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="12"/> <span>12</span> </label> </div> </div> </div> </div> <div id="div_Q2"> <div id="tb_Q"> <div id="Q2_text" class="shiny-html-output"></div> </div> <div id="tb_Qt"> <div id="Q2" class="shiny-html-output"></div> </div> <div id="div_ans"> <div id="Q1_Ans" class="form-group shiny-input-radiogroup shiny-input-container shiny-input-container-inline"> <div class="shiny-options-group"> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="1" checked="checked"/> <span>1</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="2"/> <span>2</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="3"/> <span>3</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="4"/> <span>4</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="5"/> <span>5</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="6"/> <span>6</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="7"/> <span>7</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="8"/> <span>8</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="9"/> <span>9</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="10"/> <span>10</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="11"/> <span>11</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="12"/> <span>12</span> </label> </div> </div> </div> </div>

Answer 2

You need to remove the styles from the ones that aren't checked, or they will keep the styles that you've added.

And it's probably better if you use a CSS style rule to specify the styles.

 $('.radio-inline input').click(function(){ $(this).closest('.shiny-options-group') .find('.radio-inline') .removeClass('checked'); $(this).parent() .addClass('checked'); });

 .shiny-options-group { display: flex; justify-content: space-around; padding-left: 1px; padding-right: 1px; } .shiny-options-group label { float: left; } .shiny-options-group label { display: inline-block; width: 9%; background-color: #d2e9ef; color: #000; font-size: 14px; font-weight: bold; text-align: center; padding: 6px 14px; border: 1px solid #FFF; cursor: pointer; } .shiny-options-group input{ display: none; } label input[type="radio"]:checked ~ span { color: #FFF; } .radio-inline.checked { background-color: #d10000; } .radio-inline.checked span { color: white; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="div_Q1"> <div id="tb_Q"> <div id="Q1_text" class="shiny-html-output"></div> </div> <div id="tb_Qt"> <div id="Q1" class="shiny-html-output"></div> </div> <div id="div_ans"> <div id="Q1_Ans" class="form-group shiny-input-radiogroup shiny-input-container shiny-input-container-inline"> <div class="shiny-options-group"> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="1" checked="checked"/> <span>1</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="2"/> <span>2</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="3"/> <span>3</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="4"/> <span>4</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="5"/> <span>5</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="6"/> <span>6</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="7"/> <span>7</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="8"/> <span>8</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="9"/> <span>9</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="10"/> <span>10</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="11"/> <span>11</span> </label> <label class="radio-inline"> <input type="radio" name="Q1_Ans" value="12"/> <span>12</span> </label> </div> </div> </div> </div> <div id="div_Q2"> <div id="tb_Q"> <div id="Q2_text" class="shiny-html-output"></div> </div> <div id="tb_Qt"> <div id="Q2" class="shiny-html-output"></div> </div> <div id="div_ans"> <div id="Q2_Ans" class="form-group shiny-input-radiogroup shiny-input-container shiny-input-container-inline"> <div class="shiny-options-group"> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="1" checked="checked"/> <span>1</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="2"/> <span>2</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="3"/> <span>3</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="4"/> <span>4</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="5"/> <span>5</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="6"/> <span>6</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="7"/> <span>7</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="8"/> <span>8</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="9"/> <span>9</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="10"/> <span>10</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="11"/> <span>11</span> </label> <label class="radio-inline"> <input type="radio" name="Q2_Ans" value="12"/> <span>12</span> </label> </div> </div> </div> </div>

Answer 3

1.I do not know if it is the best example of optimization, but it is a solution, I hope it helps.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ console.log("document loaded"); var id1 = true; var id2 = true; var id3 = true; var id4 = true; $("#myId1").on('click', function(){ $("#myId1").removeClass('myClass').addClass('myNewClass'); id1 = false; if(id2 === false || id3 == false || id4 == false){ $("#myId2").removeClass('myNewClass').addClass('myClass'); $("#myId3").removeClass('myNewClass').addClass('myClass'); $("#myId4").removeClass('myNewClass').addClass('myClass'); id2 = true; id3 = true; id4 = true; } }); $("#myId2").on('click', function(){ $("#myId2").removeClass('myClass').addClass('myNewClass'); id2 = false; if(id1 == false || id3 == false || id4 == false){ $("#myId1").removeClass('myNewClass').addClass('myClass'); $("#myId3").removeClass('myNewClass').addClass('myClass'); $("#myId4").removeClass('myNewClass').addClass('myClass'); id1 = true; id3 = true; id4 = true; } }); $("#myId3").on('click', function(){ $("#myId3").removeClass('myClass').addClass('myNewClass'); id3 = false; if(id1 == false || id2 == false || id4 == false){ $("#myId1").removeClass('myNewClass').addClass('myClass'); $("#myId2").removeClass('myNewClass').addClass('myClass'); $("#myId4").removeClass('myNewClass').addClass('myClass'); id1 = true; id2 = true; id4 = true; } }); $("#myId4").on('click', function(){ $("#myId4").removeClass('myClass').addClass('myNewClass'); id4 = false; if(id1 == false || id2 == false || id3 == false){ $("#myId1").removeClass('myNewClass').addClass('myClass'); $("#myId2").removeClass('myNewClass').addClass('myClass'); $("#myId3").removeClass('myNewClass').addClass('myClass'); id1 = true; id2 = true; id3 = true; } }); }); </script> <style> .myClass { background-color: #c2c2c2; color: #ffffff; text-align: center; width: 30px; height: 30px; } .myNewClass { background-color: #ff0000; color: #000000; text-align: center; width: 30px; height: 30px; } </style> </head> <body> <div id="myId1" class="myClass"><p style="padding-top: 5px;">1</p></div> <div id="myId2" class="myClass"><p style="padding-top: 5px;">2</p></div> <div id="myId3" class="myClass"><p style="padding-top: 5px;">3</p></div> <div id="myId4" class="myClass"><p style="padding-top: 5px;">4</p></div> </body> </html>