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

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;

      }

联署材料：

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：are and :affer on label

<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

你可以使用：

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

​

Answer 3

自定义单选按钮必须是一个label w/ for属性，与其替换的input的id相同。例如：

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

一个有用的例子。