更改时自定义单选框 CSS答案

【问题标题】：Custom radio box CSS on change更改时自定义单选框 CSS
【发布时间】：2018-10-27 17:48:24
【问题描述】：

我有一个单选框，我自定义它看起来像一个方形复选框。更改时选定的单选按钮 CSS 会更改。

 $("input:radio").on('change', function() {
              $('.items-inner-wrapper li.highlight').removeClass('highlight');
       $(this).closest('li').addClass('highlight');


        });

.items-wrapper {
    float: left;
    width: 50%;
}
.items-text-field-wrapper {
    width: 100%;
}
.items-wrapper ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.items-wrapper ul li {
    float: left;
    width: 70%;
}
.items-wrapper ul li label,
.items-wrapper.items-text-field-wrapper label {
    color: #313131;
    font-family: "Open Sans", Helvetica Neue, Sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin: 0px 0 12px 15px;
    line-height: normal;
    padding: 0;
    white-space: normal;
    width: 70%;
    display: inline-block;
    cursor: pointer;
}
.items-wrapper.items-text-field-wrapper label {
    width: auto;
}
.items-wrapper input[type=radio], 
.items-wrapper input[type=checkbox] {
    margin: 0;
    opacity: 0;
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.items-wrapper ul li.items-input-wrapper {
    width: 24px;
    height: 24px;
}
.items-wrapper ul li.items-input-wrapper:after {
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.4);
    box-shadow: 0 0 0 1px rgba(0,0,0,.4);
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 2px;
}
.items-wrapper ul li.items-input-wrapper.highlight:after {
    -webkit-box-shadow: 0 0 0 2px rgba(0,0,0,.9);
    box-shadow: 0 0 0 2px rgba(0,0,0,.9);
    background-color: #000;
}


.items-image-wrapper ul li.items-input-wrapper {
    float: none;
    opacity: 0;
    position: absolute;
    z-index: 4;
    right: 0;
    width: 100%;
    height: 100%;
}
.items-image-wrapper ul li.items-input-wrapper input[type=radio] {
    width: 100%;
    height: 100%;
}
.items-image-wrapper ul li.items-label-wrapper {
    width: 100%;
    float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
    <div>
        <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper ">
					<input type="radio" name="Face" value="DeepMill">
                </li>
                <li class="items-label-wrapper">
                    <label>Deep Mill</label>
                </li>
            </ul>
          </div>
          <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper ">
                     <input type="radio" name="Face" value="MidMill">
                </li>
                <li class="items-label-wrapper">
                    <label>Mid Mill</label>
                </li>
            </ul>
          </div>
         </div>   
        <div>
    <div>
	A different radio button set
	<div>
        <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper highlight">
					<input type="radio" name="FaceEngraving" value="LK">
                </li>
                <li class="items-label-wrapper">
                    <label>LK</label>
                </li>
            </ul>
          </div>
          <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper ">
                     <input type="radio" name="FaceEngraving" value="Logo">
                </li>
                <li class="items-label-wrapper">
                    <label>Logo</label>
                </li>
            </ul>
          </div>
         </div>   
        <div>
    <div>

问题是—— 当有单选按钮更改时，我只想清除该组中先前选择的单选，而不是所有其他单选按钮。我该如何解决这个问题？

【问题讨论】：

标签： jquery html css radio-button

【解决方案1】：

您可以将每个组包含在一个 div 中（css 没有变化）

 $("input:radio").on('change', function() {
    $(this).closest('.radio-set').find ('li.highlight').removeClass('highlight');
    $(this).closest('li').addClass('highlight');
});

.items-wrapper {
    float: left;
    width: 50%;
}
.items-text-field-wrapper {
    width: 100%;
}
.items-wrapper ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.items-wrapper ul li {
    float: left;
    width: 70%;
}
.items-wrapper ul li label,
.items-wrapper.items-text-field-wrapper label {
    color: #313131;
    font-family: "Open Sans", Helvetica Neue, Sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin: 0px 0 12px 15px;
    line-height: normal;
    padding: 0;
    white-space: normal;
    width: 70%;
    display: inline-block;
    cursor: pointer;
}
.items-wrapper.items-text-field-wrapper label {
    width: auto;
}
.items-wrapper input[type=radio], 
.items-wrapper input[type=checkbox] {
    margin: 0;
    opacity: 0;
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.items-wrapper ul li.items-input-wrapper {
    width: 24px;
    height: 24px;
}
.items-wrapper ul li.items-input-wrapper:after {
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.4);
    box-shadow: 0 0 0 1px rgba(0,0,0,.4);
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 2px;
}
.items-wrapper ul li.items-input-wrapper.highlight:after {
    -webkit-box-shadow: 0 0 0 2px rgba(0,0,0,.9);
    box-shadow: 0 0 0 2px rgba(0,0,0,.9);
    background-color: #000;
}


.items-image-wrapper ul li.items-input-wrapper {
    float: none;
    opacity: 0;
    position: absolute;
    z-index: 4;
    right: 0;
    width: 100%;
    height: 100%;
}
.items-image-wrapper ul li.items-input-wrapper input[type=radio] {
    width: 100%;
    height: 100%;
}
.items-image-wrapper ul li.items-label-wrapper {
    width: 100%;
    float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
    <div class="radio-set">
        <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper ">
					      <input type="radio" name="Face" value="DeepMill">
                </li>
                <li class="items-label-wrapper">
                    <label>Deep Mill</label>
                </li>
            </ul>
          </div>
          <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper ">
                     <input type="radio" name="Face" value="MidMill">
                </li>
                <li class="items-label-wrapper">
                    <label>Mid Mill</label>
                </li>
            </ul>
          </div>
         </div>   
        <div>
    <div>
	A different radio button set
	<div class="radio-set">
        <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper highlight">
					<input type="radio" name="FaceEngraving" value="LK">
                </li>
                <li class="items-label-wrapper">
                    <label>LK</label>
                </li>
            </ul>
          </div>
          <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper ">
                     <input type="radio" name="FaceEngraving" value="Logo">
                </li>
                <li class="items-label-wrapper">
                    <label>Logo</label>
                </li>
            </ul>
          </div>
         </div>   
        <div>
    <div>

【讨论】：

【解决方案2】：

我已经调整了您的 html 代码。你几乎就在那里。它只是你需要为 div 分配不同的类来区分它的目标。对于名称 Face，我分配的父 div 是各种 1，而对于名称 Facengraving，我分配的父名称是各种 2。然后我们可以开始区分它。尝试播放演示。

祝你有美好的一天

在这里试试DEMO

HTML

<div class="various1">
    <div class="items-wrapper">
        <ul class="items-inner-wrapper">
            <li class="items-input-wrapper ">
                <input type="radio" name="Face" value="DeepMill">
            </li>
            <li class="items-label-wrapper">
                <label>Deep Mill</label>
            </li>
        </ul>
      </div>
      <div class="items-wrapper">
        <ul class="items-inner-wrapper">
            <li class="items-input-wrapper ">
                 <input type="radio" name="Face" value="MidMill">
            </li>
            <li class="items-label-wrapper">
                <label>Mid Mill</label>
            </li>
        </ul>
      </div>
     </div>   
    <div>
<div>
A different radio button set
<div class="various2">
    <div class="items-wrapper">
        <ul class="items-inner-wrapper">
            <li class="items-input-wrapper">
                <input type="radio" name="FaceEngraving" value="LK">
            </li>
            <li class="items-label-wrapper">
                <label>LK</label>
            </li>
        </ul>
      </div>
      <div class="items-wrapper">
        <ul class="items-inner-wrapper">
            <li class="items-input-wrapper ">
                 <input type="radio" name="FaceEngraving" value="Logo">
            </li>
            <li class="items-label-wrapper">
                <label>Logo</label>
            </li>
        </ul>
      </div>
     </div>   
    <div>
<div>

$(".various1 input:radio").on('change', function() {
   if ($(this).is(":checked")) {
     $(this).closest('li').addClass('highlight');
     $('.various1 input:radio:not(:checked)').closest('li').removeClass('highlight');
  }
});


$(".various2 input:radio").on('change', function() {
   if ($(this).is(":checked")) {
     $(this).closest('li').addClass('highlight');
     $('.various2 input:radio:not(:checked)').closest('li').removeClass('highlight');
  }
});

【讨论】：