Question

示例如下：

<div class="control-group">
    <span class="radio">
       <input type="radio" class="input_radio" >
    </span>
    <label class="color_btn">
    <div class="inner_value"></div>
    </label>
</div>

在上面的例子中，我需要在检查输入时使用box-shadow到div = class_ inner_value。关于这个的任何想法？

Answer 1

如果您将input拉出span，那么您可以使用兄弟选择器单独使用CSS。

input:checked + .color_btn .inner_value {
  box-shadow: 0 5px 5px #000;
}

<div class="control-group">
  <input type="radio" class="input_radio" >
  <label class="color_btn">
  <div class="inner_value">inner_value</div>
  </label>
</div>

这是一种使用javascript的方法，通过向input添加事件处理程序，然后为阴影分配一个类。

document.getElementById('radio').addEventListener('click',function() {
  document.getElementsByClassName('inner_value')[0].classList.add('shadow');
});

.shadow {
  box-shadow: 0 5px 5px #000;
}

<div class="control-group">
    <span class="radio">
       <input type="radio" class="input_radio" id="radio">
    </span>
    <label class="color_btn">
    <div class="inner_value">inner_value</div>
    </label>
</div>

Answer 2

除了Michaels＆＃39;回答，这是一个javascript方法，也适用于复选框

＆＃13;

document.getElementsByClassName("input_radio")[0].onchange = function() {
      if (this.checked === true)
          document.getElementsByClassName("inner_value")[0].style.boxShadow = "2px 2px 5px #888888";
      else
          document.getElementsByClassName("inner_value")[0].style.boxShadow = "";
    };

＆＃13;

<div class="control-group">
    <span class="radio">
       <input type="radio" class="input_radio" >
    </span>
    <label class="color_btn">
    <div class="inner_value">example</div>
    </label>
</div>

＆＃13;

Answer 3

当然可以使用jQuery：

$(".input_radio").change(function() {
  if (this.checked) {
    $(this).closest('.control-group').find('.inner_value').addClass('has-shadow');
  }
});

.has-shadow {
  box-shadow: 0 0 3px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group">
  <span class="radio">
       <input type="radio" class="input_radio" >
    </span>
  <label class="color_btn">
    <div class="inner_value">Inner value div</div>
    </label>
</div>

在检查其他内容时设置样式

3 个答案: