更改字体颜色onclick单选按钮

时间：2019-04-17 11:20:40

标签： javascript jquery html css radio-button

我们正在页面中显示文本和两个单选按钮。...

单击单选按钮后，我们将根据单选按钮更改页面的背景颜色。...

要求：

我想更改文本颜色 onclick单选按钮。...

我在下面尝试过，但是没有用：

.orange input:checked ~ .text {
  color: #F4511E;
}

代码段 

html,
body {
  width: 100%;
  height: 100%;  
  margin: 0;
  padding: 0;
  text-align: center;
}

body {
  box-sizing: border-box;
  padding-top: 180px;
  background: #ffffff;
}

input {
  display: none;
}

.button {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  margin: 10px;
  cursor: pointer;
}

.button span {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background: #eeeeee;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  transition: ease .3s;
}

.button span:hover {
  padding: 10px;
}

.orange .button span {
  background: #FF5722;
}

.amber .button span {
  background: #FFC107;
}


.layer {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  /*transition: ease .3s;*/
  z-index: -1;
}

.orange input:checked ~ .layer {
  background: #F4511E;
}

.amber input:checked ~ .layer {
  background: #FFB300;
}
<body>
 
<div class="text">text</div>
 
<label class="orange">
  <input type="radio" name="color" value="orange">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>

<label class="amber">
  <input type="radio" name="color" value="amber">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>


</body>

4 个答案:

答案 0 :(得分：4)

您需要为此使用JS / jQuery，因为> + ~是兄弟姐妹选择器，因此它只选择旁边的项目

+ is the immediate subsequent sibling selector
~ is the any subsequent sibling selector

已更新PEN 

$('input[type="radio"]').on('click', function() {
    let color = $(this).parent().find('div.button span').css('background-color');
    $('.text').css('color', color);
});
html,
body {
  width: 100%;
  height: 100%;  
  margin: 0;
  padding: 0;
  text-align: center;
}

body {
  box-sizing: border-box;
  padding-top: 180px;
  background: #ffffff;
}

input {
  display: none;
}

.button {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  margin: 10px;
  cursor: pointer;
}

.button span {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background: #eeeeee;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  transition: ease .3s;
}

.button span:hover {
  padding: 10px;
}

.orange .button span {
  background: #FF5722;
}

.amber .button span {
  background: #FFC107;
}


.layer {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  /*transition: ease .3s;*/
  z-index: -1;
}

/* .orange input:checked ~ .layer {
  background: #F4511E;
}

.amber input:checked ~ .layer {
  background: #FFB300;
} */
<body>
 
<div class="text">text</div>
 
<label class="orange">
  <input type="radio" name="color" value="orange">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>

<label class="amber">
  <input type="radio" name="color" value="amber">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>


</body>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

答案 1 :(得分：2)

在jQuery下面使用siblings 

$('input[type="radio"]').change(function () {
  if($(this).is(":checked") && $(this).val() == 'amber'){
    $(this).parent().siblings('div.text').css('color', '#FFB300');
  }
  else{
    $(this).parent().siblings('div.text').css('color', '#F4511E');
  }
});
html,
body {
  width: 100%;
  height: 100%;  
  margin: 0;
  padding: 0;
  text-align: center;
}

body {
  box-sizing: border-box;
  padding-top: 180px;
  background: #ffffff;
}

input {
  display: none;
}

.button {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  margin: 10px;
  cursor: pointer;
}

.button span {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background: #eeeeee;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  transition: ease .3s;
}

.button span:hover {
  padding: 10px;
}

.orange .button span {
  background: #FF5722;
}

.amber .button span {
  background: #FFC107;
}


.layer {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  /*transition: ease .3s;*/
  z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
 
<div class="text">text</div>
 
<label class="orange">
  <input type="radio" name="color" value="orange">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>

<label class="amber">
  <input type="radio" name="color" value="amber">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>


</body>

答案 2 :(得分：1)

为此您需要jQuery / js-这是jQuery的解决方案：

$(document).ready(function() {
    var text = $('.text')
    $('input:radio').change(function() {
        if ($(this).is(':checked')) {
            var color = $(this).val();
            text.css('color', color);
        }
    });
});

在这里拨弄：http://jsfiddle.net/tpq16r5L/4/

Alos请注意，琥珀色不是可用的颜色，因此我将其更改为绿色

答案 3 :(得分：1)

更新的答案在这里

function myColour(clr)
{
alert(clr);
if(clr == 'orange')
   document.getElementsByClassName("text")[0].style.color = '#F4511E'
  else if(clr == 'amber')
      document.getElementsByClassName("text")[0].style.color = '#FFB300'
     else
       document.getElementsByClassName("text")[0].style.color = 'black'
}
html,
body {
  width: 100%;
  height: 100%;  
  margin: 0;
  padding: 0;
  text-align: center;
}

body {
  box-sizing: border-box;
  padding-top: 180px;
  background: #ffffff;
}

input {
  display: none;
}

.button {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  margin: 10px;
  cursor: pointer;
}

.button span {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background: #eeeeee;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  transition: ease .3s;
}

.button span:hover {
  padding: 10px;
}

.orange .button span {
  background: #FF5722;
}

.amber .button span {
  background: #FFC107;
}


.layer {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  /*transition: ease .3s;*/
  z-index: -1;
}
<body>
 
<div class="text">text</div>
 
<label class="orange">
  <input onclick="myColour('orange')" type="radio" name="color" value="orange">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>

<label class="amber">
  <input onclick="myColour('amber')" type="radio" name="color" value="amber">
  <div class="layer"></div>
  <div class="button"><span></span></div>
</label>


</body>

相关问题
最新问题