jquery - 自定义单选框 CSS 发生变化

标签 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>

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

最佳答案

您可以将每个组集包含在一个 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>

关于jquery - 自定义单选框 CSS 发生变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53020338/

上一篇：css - 如何在 React 中隐藏包装组件

下一篇：html - 造型联系表格 7 单选按钮

相关文章：

javascript - 发送 AJAX 请求的属性列表上的正则表达式标志 b 无效

javascript - 直接使用formData(json文件导入/上传)

javascript - jQuery 插件覆盖按键事件

javascript - 动态 SVG 元素未正确使用 mask

html - 如何仅使用内联样式删除 span 元素之间的空格？

javascript - 单击类的元素时始终触发事件

javascript - 事件监听器没有被删除

html - 由浏览器在 P 标签中生成

css - 如何使用纯 CSS 在另一个 div 中制作响应式可滚动 div

html - 如何在另一个div中垂直对齐一个div

©2024 IT工具网  联系我们