自定义单选按钮需要显示值作为原始输入

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; 

     } 

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

我是懒惰的化妆例如，从你的代码，所以我路过亩码，我用什么，我希望你能适应这四款您的需求，例如用于X或V你可以使用：之前和：标签

<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属性与其替换的input的id相同。例如：

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