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

Question

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

添加和删除“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

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

上使用 :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;
}