自定义单选框CSS更改

时间：2018-10-27 09:04:46

标签： jquery html css radio-button

我有一个自定义为看起来像方形复选框的单选框。在更改时，选定的单选按钮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>

问题是- 当单选按钮发生更改时，我只希望清除该组中先前选择的单选按钮，而不要清除所有其他单选按钮。 我该如何解决？

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

我略微调整了您的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>

JS 

$(".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');
  }
});
相关问题
最新问题