是否可以使用 jquery 更改单击事件上单选按钮的颜色？

Question

我的输入框是这样的

<div>
  <div>
    <input type="radio" name="radioBtn" value="true" id="radioYes" class="radioBtn"/><br />
    <span>Yes</span>
  </div>
  <div>
    <input type="radio" name="radioBtn" value="true" id="radioNo" class="radioBtn"/><br />
    <span>No</span>
  </div>
</div>

当用户点击这些单选按钮时，我会触发一个点击事件，并且我想更改单选按钮的颜色。 我尝试了以下方法，但没有运气。它似乎没有将单选按钮的颜色更改为红色。我在这里遗漏了什么吗？还是我做错了什么？任何意见都非常感谢。

提前致谢。

$("input[name^='radioBtn']").click(function (event) {

//Change color of radio button to red
$(".radioBtn").css("color","red");

if($("#radioYes").is(':checked')) {
//Do something
}else{
//Do something
}

});

注意：我只想在触发点击事件时更改单选按钮的颜色。我之所以指定这一点，是因为还有其他调用会修改此单选按钮的值，但它们不会在点击事件时触发。

Answer 1

您可以在使用 :checked:after 选中的单选按钮上应用一些 CSS。

$("input[name^='radioBtn']").click(function(event) {
  $(this).addClass('test');
  if ($("#radioYes").is(':checked')) {
    //Do something
  } else {
    //Do something
  }

});

.test:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: red;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 1px solid white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <input type="radio" name="radioBtn" value="true" id="radioYes" class="radioBtn" /><br />
    <span>Yes</span>
  </div>
  <div>
    <input type="radio" name="radioBtn" value="true" id="radioNo" class="radioBtn" /><br />
    <span>No</span>
  </div>
</div>

注意：您可以根据需要更改 CSS 属性。

Answer 2

.radioBtn {
  width: 0;
  height: 0;
  position: relative;
}

.radioBtn::after, .radioBtn::before {
  content: '';
  display: inline-block;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid blue;
}

.radioBtn::before {
  width: 6px;
  height: 6px;
  left: 2px;
  top: 2px;
  border-color: transparent;
}

.radioBtn:checked::before {
  border-color: red;
  background-color: red;
}
.radioBtn:checked::after {
  border-color: red;
}

.parent {
  display: inline-flex;
}

label {
  margin-left: 10px;
}

<div class='parent'>
    <input type="radio" name="radioBtn" value="true" id="radioYes" class="radioBtn"/><br />
    <label for="radioYes">Yes</label>
  </div>
  <div class='parent'>
    <input type="radio" name="radioBtn" value="true" id="radioNo" class="radioBtn"/><br />
    <label for="radioNo">No</label>
  </div>

检查一下，我已经重新创建了您的要求。如果有任何需要，请告诉我。在这里，我使用输入的伪类创建了一个自定义元素。