0

My input field looks like this

<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>

When a user clicks on these radio buttons, I'm firing up a click event and I want to change the colour of the radio button. I've tried the following, but no luck. It does not seem to change the colour of the radio button to red. Any I missing something here?. or am I doing something wrong?. Any inputs are highly appreciated.

Thanks in advance.

$("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
}

});

NOTE: I want to change the colour of the radio button only when a click event is triggered. I'm specifying this because there are other calls that modify the value of this radio button however they are not triggered on click event.

curiousCat
  • 157
  • 3
  • 11
  • So you want to set one colour to radio button if it is checked and another colour if not. right? – Abin Thaha Jul 15 '21 at 04:15
  • https://stackoverflow.com/questions/4253920/how-do-i-change-the-color-of-radio-buttons - Changing colour of radio button is not possible, unless you use a custom one by your own – Abin Thaha Jul 15 '21 at 04:17
  • Yes, that's what I'm trying to achieve. Set a colour to radio button when it's checked and another when it's not. – curiousCat Jul 15 '21 at 04:18

2 Answers2

1

You can apply some CSS on radio button checked using :checked:after .

$("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>

Note: you can change CSS property as your requirement.

4b0
  • 21,981
  • 30
  • 95
  • 142
  • I was trying to achieve this somehow using the jquery selectors and .css() method is because there are other calls that modify the value of the radio button. But I want to change the colour of the radio button to red only when a click event is triggered. The above solution with CSS definitely changes the colour of radio buttons but I'm afraid it won't be for a specific event. Thanks very much for your answer – curiousCat Jul 15 '21 at 05:26
  • See updated answer. If you want via jQuery You can use `addClass `. – 4b0 Jul 15 '21 at 05:57
  • The above solution works like magic in Chrome. However, looks like Internet Explorer does not support pseudo-class :(. Although I can see that the class is added to my input element, the radio button colour remains the same in IE. Any recommendations on How to make this work for IE?. Other solutions I found on other posts are all based on hiding the radio button altogether and styling by the label. Any recommendations?. Thanks in advance. – curiousCat Jul 20 '21 at 23:39
1

.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>

Check this, I have recreated your requirement. Let me know in case if anything required. Here, I have created a custom element using pseudo classes of input.

Abin Thaha
  • 4,493
  • 3
  • 13
  • 41
  • I was trying to achieve this somehow using the jquery selectors and .css() method is because there are other calls that modify the value of the radio button. But I want to change the colour of the radio button to red only when a click event is triggered. The above solution with CSS definitely changes the colour of radio buttons but I'm afraid it won't be for a specific event. Thanks very much for your answer – curiousCat Jul 15 '21 at 05:09
  • But the change in radio buttons only happens on click, but if you need a solution using JavaScript too, the same way you can add your JS code, instead of the :checked, you can use to add some classname and change the colour based on the class name and that would work for you I guess. – Abin Thaha Jul 15 '21 at 05:15
  • There are other calls that set the value of radio button using prop() method without triggering a click event. And I do not want to change the colour of the radio button in such cases. :) $("input#radioYes").prop("checked",true); or $("input#radioNo").prop("checked",true); Thanks again for your suggestion :) – curiousCat Jul 15 '21 at 05:22
  • @curiousCat, but based on your code, both the radio buttons will be in red colour when you click on one of them, right ? – Abin Thaha Jul 15 '21 at 06:21