自定義單選按鈕需要顯示值作爲原始輸入

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>