单击按钮时更改单选按钮颜色和字形

Question

我的基于 CodeIgniter 和 Bootstrap 的网站应用程序存在问题。

我想在按下单选按钮时更改颜色。

这是我的代码：

<div class="btn-group" data-toggle="buttons">              
          <label class="btn btn-primary">
          <input type="radio" name="jawaban[<?php echo $i ?>]" value="1" id="radio1<? echo $i; ?>"> 
            <span class="glyphicon glyphicon-ok"></span>
          Benar 
          </label>
          <label class="btn btn-success">
          <input type="radio" name="jawaban[<?php echo $i ?>]" value="0" checked id="radio2<? echo $i; ?>"> 
            <span class="glyphicon glyphicon-remove"></span>
          Tidak
          </label>              
          </div>

当我按下按钮Benar 时，颜色将变为Red，当我按下按钮Tidak 时也会发生这种情况。

Answer 1

我会推荐你​​使用 javascript。它更加简单和有用。

您需要像这样向您的单选按钮添加一个 onclick 侦听器：

    <label class="btn btn-primary BenarRadio">
       <input type="radio" onclick="changeColor();" name="jawaban[<?php echo $i ?>]"              value="1" id="radio1<? echo $i; ?>"> 
    Benar 
   </label>

之后，您将函数 changeColor() 添加到同一个文件中，以便您可以放置​​此代码 在文件的顶部。

<script>
 function changeColor() {
     var radio = document.getElementsByClassName('BenarRadio');
     radio[0].style.backgroundColor = 'red';

 }
</script>