пользовательские переключатели должны отображать значение как исходный вход

Question

Я пытаюсь создать пользовательские переключатели, для этого мне нужно скрыть исходный ввод и сделать это с помощью значков.

Добавление и удаление класса «проверено» отлично работает, но оно должно одновременно изменять значок, отображающий крестик, если он не установлен, или проверить, проверен ли он. И ... Я просто не могу понять, как это должно работать так очевидно ... пытаясь сделать jquery, поскольку я делаю это, не имеет большого смысла ....

Кроме того, поскольку они являются радио кнопки, когда вы нажимаете переключатель отмечен, он не должен меняться, поэтому его нужно проверить, если пользователь нажимает на непроверенную радиокнопку, проверенный один перестанет проверяться, и тот, который пользователь нажал последним, станет проверенным (Я думаю, что я не очень хорошо объяснил это, они просто должны вести себя как радиокнопки). Кто-нибудь может дать мне руку с этим?

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; 

     } 

ЯШ:

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

Я является ленивым например макияжем из кода, так что я передачи коды му, что я использовал, я надеюсь, что вы можете адаптировать эти четыре ваших потребности, например, для X или V вы можете использовать: до и : affer на этикетке

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

Answer 2

Обычай радио-кнопка должна быть label ж/for атрибут, идентичный idinput, его заменяющий. Например:

<input id="foobar" type="radio"> 
<label for="foobar"> 

A working example.

Answer 3

Вы можете использовать:

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

Сниппет:

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