javascript - 如果其文本等于某些文本，则更改选中的输入颜色

Question

我用一些单选按钮制作了两个表格。我用 css :before 选择器更改了它们。我使用很棒的字体而不是单选按钮。正如您所看到的代码，如果选中单选按钮并且其文本为“专家”，我将尝试更改颜色，然后添加具有不同颜色属性的类。我用点击事件做到了这一点，现在它正在工作。但我希望在页面加载时发生这种情况，而不是在点击之后发生。

任何帮助我将不胜感激

$(document).ready(function() {
    var radioBtn = $('form label span');
    radioBtn.click(function(){
        if ($(this).prev().find('input[type="radio"]:checked')) {
            if ($(this).text() === 'Expert') {
                $(this).addClass('greenBox');
            }
        }
        
    });
});

form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 0;
}

form label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    margin-right: 10%;
    margin-bottom: 0;
}

form label input {
    display: none;
    overflow: hidden;
}
form label input+span {
    font-size: 12px;
}

form label input+span::before {
    content: '\f096';
    font-family: 'FontAwesome';
    font-size: 52px;
    font-style: normal;
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1.2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: #aab3c3;
}


form label input:checked + span::before {
    content: '\f14a';
    color: #aab3c3;
    -webkit-animation: check 0.3s ease-in-out;
    animation: check 0.3s ease-in-out;
}

form label input:checked +span.greenBox::before {
    color: #4cd20b;
}

@-webkit-keyframes check {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0); 
    }
    70% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1); 
    } 
    100% {
        -webkit-transform: scale(1);
        transform: scale(1); 
    } 
}

@keyframes check {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0); 
    }
    70% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1); 
    } 
    100% {
        -webkit-transform: scale(1);
        transform: scale(1); 
    } 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="yetkinlik-wrapper row-fluid">
<div class="row-fluid gozlem-title">
    <div class="span2 empty"></div>
</div>
<div class="bag-kurma yetkinlik-guven row-fluid">
    <form action="" class="yetkinlik span5">
        <label>
            <input type="radio" name="radio" checked><span>Expert</span>
        </label>
        <label>
            <input type="radio" name="radio"><span>Intermediate</span>
        </label>
        <label>
            <input type="radio" name="radio"><span>Beginner</span>
        </label>
    </form>

    <form action="" class="guven span5">
        <label>
            <input type="radio" name="radio"><span>Expert</span>
        </label>
        <label>
            <input type="radio" name="radio"><span>Intermediate</span>
        </label>
        <label>
            <input type="radio" name="radio" checked><span>Beginner</span>
        </label>
    </form>
</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

.

Answer 1

可以在document.ready中添加如下代码实现绿框:

$('input[name=radio]:checked').each(function() {
    $(this).next().addClass('greenBox');
});

上面的代码会检查DOM就绪，如果有radio有checked，如果有，它会添加相关的类greenBox .

下面是更新后的代码:

$(document).ready(function() {
  $('input[name=radio]:checked').each(function() {
    if ($(this).next().text() === 'Expert')
      $(this).next().addClass('greenBox');
  });

  var radioBtn = $('form label span');
  radioBtn.click(function() {
    if ($(this).prev().find('input[type="radio"]:checked')) {
      if ($(this).text() === 'Expert') {
        $(this).addClass('greenBox');
      }
    }

  });
});

form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 0;
}

form label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 10%;
  margin-bottom: 0;
}

form label input {
  display: none;
  overflow: hidden;
}

form label input+span {
  font-size: 12px;
}

form label input+span::before {
  content: '\f096';
  font-family: 'FontAwesome';
  font-size: 52px;
  font-style: normal;
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1.2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #aab3c3;
}

form label input:checked+span::before {
  content: '\f14a';
  color: #aab3c3;
  -webkit-animation: check 0.3s ease-in-out;
  animation: check 0.3s ease-in-out;
}

form label input:checked+span.greenBox::before {
  color: #4cd20b;
}

@-webkit-keyframes check {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  70% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes check {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  70% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="yetkinlik-wrapper row-fluid">
  <div class="row-fluid gozlem-title">
    <div class="span2 empty"></div>
  </div>

  <div class="bag-kurma yetkinlik-guven row-fluid">
    <form action="" class="yetkinlik span5">
      <label>
<input type="radio" name="radio" checked><span>Expert</span>
</label>
      <label>
<input type="radio" name="radio"><span>Intermediate</span>
</label>
      <label>
<input type="radio" name="radio"><span>Beginner</span>
</label>
    </form>

    <form action="" class="guven span5">
      <label>
<input type="radio" name="radio"><span>Expert</span>
</label>
      <label>
<input type="radio" name="radio"><span>Intermediate</span>
</label>
      <label>
<input type="radio" name="radio" checked><span>Beginner</span>
</label>
    </form>
  </div>


</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>