html+css自定义勾选框（单选、复选）

最新推荐文章于 2024-03-19 00:00:51 发布

星旅zl

最新推荐文章于 2024-03-19 00:00:51 发布

阅读量2.6w

点赞数 4

分类专栏： JS相关 web开发

本文链接：https://blog.csdn.net/nzzl54/article/details/97886674

版权

web开发同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

JS相关

18 篇文章 0 订阅

订阅专栏

效果图如上，这里主要是css对勾选时做样式上的处理，在html的<head>标签我们引入jquery和勾选框样式

<title>基本信息</title>
 <script type="text/javascript" src="jq/jquery.min.js"></script>
<style>
.span-style{
  margin-left:20px;
  border:none;
}
label{
  position: absolute;
  display: inline-block;
  border: 1px solid #2c2c2c;
  width:13px;
  height:13px;
  border-radius: 3px;

}
label input[type="radio"] {
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            margin: 0;
        }
label input[type="radio"]:after {
  display: inline-block;
  position: absolute;
  content:"";
  background-color: transparent;
}
 label input[type="radio"]:checked:after {
  //content:"\2714";
  //text-align: center;
  font-weight:bold
  font-size:13px;
  font-family:Sans-serif;
  background: transparent;
  top: -3px;
  left: 3px;
  content:"L";
  transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
    -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
}
</style>

在html<body>里面放入自定义的勾选框还有对这些勾选的监听或者改变

div style ="margin-top: 100px;margin-left: 100px;">
<div>单选</div>
   <label><input type="radio" name = "test" class = "test" id = "test-s1" value = "s1"></input> </label><span class = "span-style">testS1</span>
<label><input type="radio" name = "test" class = "test" id = "test-s2" value = "s2"></input> </label><span class = "span-style">testS2</span>
<label><input type="radio" name = "test" class = "test" id = "test-s3" value = "s3"></input> </label><span class = "span-style">testS3</span>
</div>

<div style ="margin-top: 100px;margin-left: 100px;">
<div>复选</div>
   <label><input type="radio" name = "testF1" class = "testF" id = "testf-s1" value = "0"></input> </label><span class = "span-style">testFS1</span>
<label><input type="radio" name = "testF2" class = "testF" id = "testf-s2" value = "0"></input> </label><span class = "span-style">testFS2</span>
<label><input type="radio" name = "testF3" class = "testF" id = "testf-s3" value = "0"></input> </label><span class = "span-style">testFS3</span>
</div>

<script type="text/javascript">

$(document).ready(function(){
	console.log("ready");
    $(".testF").click(function(){//console.log($(this));
          if($(this)[0].value == "1"){//如果点击的对象原来是选中的，取消选中
              $(this).removeAttr("checked");
              $(this).val("0");
          }else{
              $(this).val("1");
          }
          
     });
    $(".test").each(function(){
        $(this).click(function(){
            console.log("value = "+$(this).val());
        });
    });
});
</script>

这里简单点，复选用value改变来记录选中与否，只需要通过唯一的class来获取值为1的所有框就能拿到勾选项了。

================================

记一下打印换页代码：

@media print
{
.pageBreak
{
page-break-after: always;
}
.noPrint
{
display: none;
}
}

星旅zl

关注

4
点赞
踩
34

收藏

觉得还不错? 一键收藏
0
评论
html+css自定义勾选框（单选、复选）

效果图如上，这里主要是css对勾选时做样式上的处理，在html的<head>标签我们引入jquery和勾选框样式<title>基本信息</title> <script type="text/javascript" src="jq/jquery.min.js"></script><style>.span-sty...
复制链接

扫一扫