使用 jQuery 設置單選按鈕樣式

Question

我一直在嘗試為以下示例設置樣式，以便選中的單選按鈕在選中時使用不同的background-color設置樣式。

由於我不了解 jQuery，我已經設法將它與 SO 上的其他帖子放在一起，據我所知，沒有辦法在純 CSS 中做到這一點，因為標簽是輸入的父級。

HTML 代碼無法更改，因為它是由 R 中的 Shiny 接口輸出的。

目前，背景將保持檢查狀態。 我曾嘗試同時設置選中和未選中的樣式 - 但這似乎不起作用。

 $('.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

您可以使用.siblings()切換到當前<label>元素的同級元素的background-color和color

 $('.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

您需要從未選中的樣式中刪除樣式，否則它們將保留您添加的樣式。

如果您使用 CSS 樣式規則來指定樣式可能會更好。

 $('.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.我不知道這是否是優化的最佳示例，但它是一個解決方案，希望對您有所幫助。

 <!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>