custom radio buttons need to display value as the original input

Question

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 1

I'm are to lazy make example from your code so I passing mu code what i used, i hope you can adapt this four your needs, for example for X or V you can use :before and :affer on label

<ul class="inputs-group">
    <li class="button-input-wrap">
        <input type="checkbox" id="room-1" class="button-input run-search" name="rooms" value="1">
        <label class="button-label" for="room-1">1h</label>
    </li>
    <li class="button-input-wrap">
        <input type="checkbox" id="room-2" class="button-input run-search" name="rooms" value="2">
        <label class="button-label" for="room-2">2h</label>
    </li>
    <li class="button-input-wrap">
        <input type="checkbox" id="room-3" class="button-input run-search" name="rooms" value="3">
        <label class="button-label" for="room-3">3h</label>
    </li>
    <li class="button-input-wrap">
        <input type="checkbox" id="room-4" class="button-input run-search" name="rooms" value="4+">
        <label class="button-label" for="room-4">4h+</label>
    </li>
</ul>

CSS

.inputs-group-wrap {
    display: inline-block;
    text-align: center;
}
.inputs-group-wrap .inputs-group {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: auto;
}
.button-input-wrap {
    position: relative;
    margin: 0 6px 0 0;
    overflow: hidden;
    display: block;
    float: left;
}
.button-input-wrap .button-input {
    position: absolute;
    top: -20px;
}

.button-input-wrap .button-label {
    height: 43px;
    font-size: 1.8rem;
    line-height: 21px;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #b2d8e1;
    background-color: #c1e8ef;
    color: #3a8da9;
    text-align: center;
    display: block;
}

.button-input-wrap .button-input:checked ~ .button-label {
    border: 1px solid #de6328;
    background-color: #de6328;
    color: #ffffff;
}