在单选按钮选择上切换背景颜色

时间：2016-11-02 02:19:54

标签： jquery html css

我正在为测试练习创建一个有很多问题的测验。每个问题都有五个单选按钮，其中只有一个正确答案。在第一时刻，5个选项具有灰色背景。单击错误的选项后，它将变为红色。如果单击另一个错误选项，它将变为红色，前一个变为灰色。如果单击正确的答案，它将变为绿色，而其他所有答案都保持灰色。

$(document).ready(function() {
  $("input[value='wrong']").click(function() {
    $("label").css("background-color", "red");
  });
  $("input[value='right']").click(function() {
    $("label").css("background-color", "green");
  });
});
.option {
  background: #eee;
  display: block;
  padding: 5px 10px 5px;
  color: #000;
  text-decoration: none;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  position: relative;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 10px;
}
input[type="radio"] {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form3">
  <input type="radio" name="option" value="wrong" class="option1">
  <label class="option">Option 1</label>
  <input type="radio" name="option" value="wrong" class="option2">
  <label class="option">Option 2</label>
  <input type="radio" name="option" value="wrong" class="option3">
  <label class="option">Option 3</label>
  <input type="radio" name="option" value="right" class="option4">
  <label class="option">Option 4</label>
  <input type="radio" name="option" value="wrong" class="option5">
  <label class="option">Option 5</label>
</form>

我如何使用JQuery实现目标？

3 个答案:

答案 0 :(得分：2)

首先，您需要更改标记。

将input内的每个label换行。

示例：

<label class="option">
   <input type="radio" name="option" value="wrong" class="option1">Option 1
</label>

然后更改您的CSS，实际使input可点击，但隐藏：

input[type="radio"] {
  opacity: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

我们也将使用两个辅助类：

.right {
  background-color: green;
}
.wrong {
  background-color: red;
}

最后将你的JS改为：

$(document).ready(function() {
  $("input[value='wrong']").click(function() {
    $(this).parent()
      .addClass("wrong") //Add class wrong to the label
      .siblings().removeClass("right wrong"); // Remove classes from the other labels.
  });
  $("input[value='right']").click(function() {
    $(this).parent()
      .addClass("right") //Add class right to the label
      .siblings().removeClass("right wrong");// Remove classes from the other labels.
  });
});

代码段： 

$(document).ready(function() {
  $("input[value='wrong']").click(function() {
    $(this).parent()
      .addClass("wrong")
      .siblings().removeClass("right wrong");
  });
  $("input[value='right']").click(function() {
    $(this).parent()
      .addClass("right")
      .siblings().removeClass("right wrong");
  });
});
.option {
  background: #eee;
  display: block;
  padding: 5px 10px 5px;
  color: #000;
  text-decoration: none;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  position: relative;
  text-decoration: none;
  margin-bottom: 10px;
}
input[type="radio"] {
  opacity: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.right {
  background-color: green;
}
.wrong {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form3">
  <label class="option">
    <input type="radio" name="option" value="wrong" class="option1">Option 1
  </label>
  <label class="option">
    <input type="radio" name="option" value="wrong" class="option2">Option 2
  </label>
  <label class="option">
    <input type="radio" name="option" value="wrong" class="option3">Option 3
  </label>
  <label class="option">
    <input type="radio" name="option" value="right" class="option4">Option 4
  </label>
  <label class="option">
    <input type="radio" name="option" value="wrong" class="option5">Option 5
  </label>
</form>

答案 1 :(得分：0)

这是工作小提琴https://jsfiddle.net/0kexaguw/3/

＆＃13;
＆＃13; 
$(document).ready(function() {
  $("input[type='radio']").on('click',function() {
    if($(this).attr('value')=="wrong"){
    $(this).next().css("background", "red");
   }else{
      $(this).next().css("background", "green");
  }
  });

});
＆＃13; 
.option {
  background: #eee;
  display: block;
  padding: 5px 10px 5px;
  color: #000;
  text-decoration: none;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  position: relative;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 10px;
}
input[type="radio"] {
  display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form3">
  <input type="radio" name="option" value="wrong" class="option1">
  <label class="option">Option 1</label>
  <input type="radio" name="option" value="wrong" class="option2">
  <label class="option">Option 2</label>
  <input type="radio" name="option" value="wrong" class="option3">
  <label class="option">Option 3</label>
  <input type="radio" name="option" value="right" class="option4">
  <label class="option">Option 4</label>
  <input type="radio" name="option" value="wrong" class="option5">
  <label class="option">Option 5</label>
</form>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

尝试在此使用data-attributes。检查我的代码段。

$(document).ready(function() {
  $("label").click(function() {
    if ($(this).data('attr') == 'wrong') {
      $(this).css("background", "red");
    } else {
    $(this).css("background", "green");}
  });
});
.option {
  background: #eee;
  display: block;
  padding: 5px 10px 5px;
  color: #000;
  text-decoration: none;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  position: relative;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 10px;
}
input[type="radio"] {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form3">
  <input type="radio" name="option" data-attr="wrong" class="option1">
  <label class="option" data-attr="wrong">Option 1</label>
  
  <label class="option" data-attr="wrong">Option 2</label>
  
  <label class="option" data-attr="wrong">Option 3</label>
  
  <label class="option" data-attr="right">Option 4</label>
  
  <label class="option" data-attr="right">Option 5</label>
</form>

相关问题
最新问题