Question

我有3个单选按钮，这些按钮绑定到一个功能，当每个按钮被选中时，该功能应该改变div内的图像。它工作正常但是当我添加CSS样式时，实际的检查器将不会只显示我设置的图标将显示，它使其无法检查。

注意：当我删除#sm-jum-btns input CSS并且检查程序实际可见代码正常工作时。当隐藏和设计那些检查器时，我也需要它。

HTML：

<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
</head>

 <div class="jumbotron text-center" id="main-jum">
    <img id="jum-img" src = "https://im.whatshot.in/img/2017/Oct/churrosweb-1509092812.jpg">
 </div>

<div class="container-fluid text-center d-md-none" id="sm-jum-btns">
   <input id="radio_left" type="radio" name="optradio" onclick="changeImg()">
    <label id="btn-left"class="radio-inline sm-jum-btn ">
      <span class="fa fa-layers fa-fw fa-circle-thin">
        <i class="fa fa-circle"></i>
      </span>
    </label>

   <input id="radio_middle" type="radio" name="optradio" onclick="changeImg()">
    <label id="btn-left"class="radio-inline sm-jum-btn ">
      <span class="fa fa-layers fa-fw fa-circle-thin">
        <i class="fa fa-circle"></i>
      </span>
    </label>

   <input id="radio_right" type="radio" name="optradio" onclick="changeImg()">
    <label id="btn-left"class="radio-inline sm-jum-btn ">
      <span class="fa fa-layers fa-fw fa-circle-thin">
        <i class="fa fa-circle"></i>
      </span>
    </label>
</div>

  <script type="text/javascript">
function changeImg(){
  var jumImg = document.getElementById("jum-img");
  var radioLeft = document.getElementById("radio_left");
  var radioRight = document.getElementById("radio_right");
  var radioMiddle = document.getElementById("radio_middle");

  if (radioLeft.checked){
    jumImg.src = "https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg";
    }
  if (radioRight.checked){
    jumImg.src = "https://images7.alphacoders.com/411/thumb-1920-411820.jpg";
    }
  if (radioMiddle.checked){
    jumImg.src = "http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg";
    }
  }
</script>

CSS：

#sm-jum-btns input {
      margin:0;
      padding:0;
     -webkit-appearance:none;
     -moz-appearance:none;
      appearance:none;
      margin-top: 180px;

}

#sm-jum-btn {
  position: relative;
}

.fa-circle-thin {
  color: #ffb300;
  width: 50px;
  height: 50px;
  font-size: 50px;
  font-weight: bold;
}

.fa-circle-thin::before {
  position: absolute;
  padding: 3.5px;
  margin-top:3.5px;
}

.fa-circle {
  color: #ffb300;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius:50px;
  font-size: 30px;
}

.fa-circle-thin:hover {
  color: #37100B;
}

#main-jum {
  padding: 0;
}

#main-jum img {
  width: 100%;
  min-height: 400px;
  object-fit:cover;
}

Answer 1

好好经过两天的搜索，并要求我通过this回答弄清楚。

基本上我应该在每个for中添加一个label属性，将其指向它的父input id，这样它就可以实际检查input并触发该功能。

您可以找到here

更多关于for属性的信息

在CSS中删除“外观”后无法检查单选按钮

1 个答案: