JQ H5 input checkbox实现单选

最新推荐文章于 2024-09-10 12:58:32 发布

奔跑的代码！

最新推荐文章于 2024-09-10 12:58:32 发布

阅读量896

点赞数

文章标签： jquery css html5 html javascript

本文链接：https://blog.csdn.net/zhgweb/article/details/113591605

版权

input checkbox 实现单选

仅供参考 自我记录.

html代码

<div class="check_box">
   <label>
   		<input type="checkbox" name="checkName" class="inp" checked />
        <span class="checkbox_sty">省级</span>
    </label>
    <label>
        <input type="checkbox" name="checkName" class="inp" />
        <span class="checkbox_sty">大区</span>
    </label>
</div>

less代码

  *{
      margin: 0;
      padding: 0;
  }
  // 单选
  .check_box {
    text-align: center;
    height: 27px;
    line-height: 27px;
    width: 200px;
    margin: 200px auto;
    label {
        &:hover {
            cursor: pointer;
            /*光标呈现为指示链接的指针（一只手）*/
        }
        &:last-child {
            input {
                margin-left: 34px;
            }
        }
        .checkbox_sty {
            padding-left: 8px;
            float: left;
            font-size: 18px;
            font-family: PingFang SC;
            color: #13BAFF;
        }
    }
}
// 单选样式
input[type="checkbox"] {
    &:hover {
        cursor: pointer;
        /*光标呈现为指示链接的指针（一只手）*/
    }
    width: 27px;
    height: 27px;
    border: 2px solid #E3E3E5;
    border-radius: 2px;
    float: left;
}

也可以直接使用css代码样式根据需求自己更改

css代码

 * {
  margin: 0;
  padding: 0;
}
.check_box {
  text-align: center;
  height: 27px;
  line-height: 27px;
  width: 200px;
  margin: 200px auto;
}
.check_box label:hover {
  cursor: pointer;
  /*光标呈现为指示链接的指针（一只手）*/
}
.check_box label:last-child input {
  margin-left: 34px;
}
.check_box label .checkbox_sty {
  padding-left: 8px;
  float: left;
  font-size: 18px;
  font-family: PingFang SC;
  color: #13BAFF;
}
input[type="checkbox"] {
  width: 27px;
  height: 27px;
  border: 2px solid #E3E3E5;
  border-radius: 2px;
  float: left;
}
input[type="checkbox"]:hover {
  cursor: pointer;
  /*光标呈现为指示链接的指针（一只手）*/
}

JQ代码

$(function () {
   // 单选
   $("input[name='checkName']").click(function () {
       $(this).attr("checked", true); //设置当前选中checkbox的状态为checked
       $(this).parent().siblings().children('.inp').prop("checked",false) //设置当前选中的checkbox同级(兄弟级)其他checkbox状态为未选中
    });
});