Jquery 更改时自定义广播框CSS

我有一个收音机盒，我已经定制成一个方形的复选框。更改时，选定的单选按钮CSS将更改

$（“输入：无线电”）.on（'change'，function（）{
$（'.items内部包装li.highlight'）.removeClass（'highlight'）；
$（this）.closest（'li'）.addClass（'highlight'）；
});
.items包装器{
浮动：左；
宽度：50%；
}
.items文本字段包装器{
宽度：100%；
}
.商品包装{
列表样式类型：无；
保证金：0；
填充：0；
位置：相对位置；
}
.李先生{
浮动：左；
宽度：70%；
}
.项目包装ul li标签，
.items-wrapper.items-text-field-wrapper标签{
颜色：#313131；
字体系列：“开放式Sans”，Helvetica Neue，无衬线；
字体大小：16px；
字体大小：400；
利润率：0px 0 12px 15px；
线高：正常；
填充：0；
空白：正常；
宽度：70%；
显示：内联块；
光标：指针；
}
.items-wrapper.items-text-field-wrapper标签{
宽度：自动；
}
.items包装器输入[type=radio]，
.items包装器输入[类型=复选框]{
保证金：0；
不透明度：0；
宽度：24px；
高度：24px；
位置：相对位置；
z指数：1；
光标：指针；
}
.items包装器ul li.items-input-wrapper{
宽度：24px；
高度：24px；
}
.items包装器ul li.items输入包装器：之后{
-webkit盒阴影：0.1px rgba（0,0,0.4）；
长方体阴影：0.1px rgba（0,0,0,4）；
显示：内联块；
位置：绝对位置；
左：0；
排名：0；
内容：“；
宽度：24px；
高度：24px；
边界半径：2px；
}
.items wrapper ul li.items输入wrapper.highlight:after{
-webkit盒阴影：0.2pxRGBA（0,0,0.9）；
盒影：02pxRGBA（0,0,0,9）；
背景色：#000；
}
.items图像包装器ul li.items-input-wrapper{
浮动：无；
不透明度：0；
位置：绝对位置；
z指数：4；
右：0；
宽度：100%；
身高：100%；
}
.items图像包装器ul li.items-input-wrapper输入[type=radio]{
宽度：100%；
身高：100%；
}
.items图像包装ul li.items-label-wrapper{
宽度：100%；
浮动：无；
}





深磨机






中磨


不同的单选按钮组




斯里兰卡






标志


您可以在一个div中包含每个组集（css上没有更改）


$（“输入：无线电”）.on（'change'，function（）{
$（this）.最近（'.radio set'）.find（'li.highlight'）.removeClass（'highlight'）；
$（this）.closest（'li'）.addClass（'highlight'）；
});
.items包装器{
浮动：左；
宽度：50%；
}
.items文本字段包装器{
宽度：100%；
}
.商品包装{
列表样式类型：无；
保证金：0；
填充：0；
位置：相对位置；
}
.李先生{
浮动：左；
宽度：70%；
}
.项目包装ul li标签，
.items-wrapper.items-text-field-wrapper标签{
颜色：#313131；
字体系列：“开放式Sans”，Helvetica Neue，无衬线；
字体大小：16px；
字体大小：400；
利润率：0px 0 12px 15px；
线高：正常；
填充：0；
空白：正常；
宽度：70%；
显示：内联块；
光标：指针；
}
.items-wrapper.items-text-field-wrapper标签{
宽度：自动；
}
.items包装器输入[type=radio]，
.items包装器输入[类型=复选框]{
保证金：0；
不透明度：0；
宽度：24px；
高度：24px；
位置：相对位置；
z指数：1；
光标：指针；
}
.items包装器ul li.items-input-wrapper{
宽度：24px；
高度：24px；
}
.items包装器ul li.items输入包装器：之后{
-webkit盒阴影：0.1px rgba（0,0,0.4）；
长方体阴影：0.1px rgba（0,0,0,4）；
显示：内联块；
位置：绝对位置；
左：0；
排名：0；
内容：“；
宽度：24px；
高度：24px；
边界半径：2px；
}
.items wrapper ul li.items输入wrapper.highlight:after{
-webkit盒阴影：0.2pxRGBA（0,0,0.9）；
盒影：02pxRGBA（0,0,0,9）；
背景色：#000；
}
.items图像包装器ul li.items-input-wrapper{
浮动：无；
不透明度：0；
位置：绝对位置；
z指数：4；
右：0；
宽度：100%；
身高：100%；
}
.items图像包装器ul li.items-input-wrapper输入[type=radio]{
宽度：100%；
身高：100%；
}
.items图像包装ul li.items-label-wrapper{
宽度：100%；
浮动：无；
}





深磨机






中磨

<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');
  }
});