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

我要从你的代码中做出懒惰的示例，所以我传递了我使用的mu代码，我希望你可以根据你的需要调整这四个，例如 X 或 V 你可以使用：before和：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属性，与其替换id的{{1}}相同。例如：

input

A working example

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

3 个答案: