eve_mf eve_mf - 3 months ago 25
CSS Question

custom radio buttons need to display value as the original input

I am trying to make custom radio buttons, for that, I have to hide the original input and do it with icons instead.

Adding and removing the class "checked" works fine, but it has to change, at the same time the icon, displaying the cross if it is not checked, or the check if it is checked. And.... I just can't understand how it should work so obviously... trying to do the jquery as I am doing it doesn't have much sense....

Also, because they are radio buttons, when you click the checked radio button, it shouldn't change, so it needs to be checked, if the user clicks the unchecked radio button, the checked one will stop being checked, and the one the user clicked last will become checked (I think I haven't explained this very well, they just need to behave exactly as radio buttons).
Anyone can give me a hand with this?

html:

<div class="price_type">
<p>PRICE TYPE</p>
<div class="radiobutton checked">
<label>
<i class="fa fa-check" aria-hidden="true"></i>
<input name="price_type" value="retail" id="retail" type="radio" checked>
<span class="text">RETAIL</span>
</label>
</div>
<div class="radiobutton">
<label>
<i class="fa fa-times" aria-hidden="true"></i>
<input name="price_type" value="inBond" id="inBond" type="radio">
<span class="text">IN BOND</span>
</label>
</div>
</div>


css:

.radiobutton {
display: inline-block;
padding-left: 10px;
}

.radiobutton label input[type="radio"],
.radiobutton label span {
vertical-align:middle;
position:relative;
font-weight: 100;
}
.radiobutton label i{
color:#979797;
z-index:1;
cursor: pointer;
font-size: 1.5em;
}
.radiobutton label input[type="radio"] {
display:block;
}
.radiobutton.checked label i {
color:blue;

}


js:

var iconRadiobutton = $('.radiobutton label i');

$(iconRadiobutton).on('click', function(){
$(iconRadiobutton).parent().parent().removeClass("checked");
if($(this).hasClass("fa-check")) {
$(this).toggleClass("fa-check fa-cross ");
}
else if ($(this).hasClass("fa-cross")) {
$(this).toggleClass("fa-cross fa-check");
}
$(this).parent().parent(".radiobutton").addClass("checked");
});


https://jsfiddle.net/tj7Lb1sv/

Answer

You may use:

.toggleClass("fa-check fa-times");

The snippet:

$(function () {
  $('.radiobutton :radio').on('change', function(e) {
    $('.radiobutton label i').toggleClass("fa-check fa-times");
  })
});
.radiobutton {
  display: inline-block;
  padding-left: 10px;
}

.radiobutton label input[type="radio"],
.radiobutton label span {
  vertical-align:middle;
  position:relative;
  font-weight: 100;
}
.radiobutton label span.icon {
  color:#979797;
  z-index:1;
  cursor: pointer;
  font-size: 1.5em;
}
.radiobutton label input[type="radio"] {
  display:block;
}
.radiobutton.checked label span.icon {
  color:brown;

}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="price_type">
    <p>PRICE TYPE</p>
    <div class="radiobutton checked">
        <label>
            <i class="fa fa-check" aria-hidden="true"></i>
            <input name="price_type" value="retail" id="retail" type="radio" checked>
            <span class="text">RETAIL</span>
        </label>
    </div>
    <div class="radiobutton">
        <label>
            <i class="fa fa-times" aria-hidden="true"></i>
            <input name="price_type" value="inBond" id="inBond" type="radio">
            <span class="text">IN BOND</span>
        </label>
    </div>
</div>

Comments