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

Question

我正在尝试制作自定义单选按钮，为此，我必须隐藏原始输入并改为使用图标。

添加和删除class "checked"工作正常，但它必须改变，同时图标，如果不勾选则显示叉号，如果是则勾选检查。而且....我只是不明白它应该如何如此明显地工作......尝试像我一样做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

自定义单选按钮必须是具有 for 属性的 label 与其替换的 input 的 id 相同。例如：

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

A working example.

Answer 2

我懒得从你的代码中制作示例，所以我传递了我使用的 mu 代码，我希望你能适应这四个你的需要，例如 X 或V 你可以在 label

上使用 :before 和 :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 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>

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

custom radio buttons need to display value as the original input

html

css

jquery

addclass

removeclass