使用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()切换到同级元素的background-color和color到当前<label>元素

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要从未检查的样式中删除样式，否则它们将保留您添加的样式。

如果你使用CSS样式规则来指定样式，那可能会更好。

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

1.我不知道它是否是优化的最好例子，但它是一个解决方案，我希望它有所帮助。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;