1. First look at the check box
Just touched the html, touched the check box...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
单选框<input type="radio" name="" id="" value="" />
</p>
<p>
复选框<input type="checkbox" name="" id="" value="" />
</p>
</body>
</html>
The effect is as follows:
When the radio button exists alone, it cannot be canceled after being checked.
2. The check box is checked by default
When the checked attribute is added to the label, it can be checked regardless of whether there is an attribute value or the attribute value is false.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
单选框<input type="radio" checked name="" id="" value="" />
</p>
<p>
单选框<input type="radio" checked="1" name="" id="" value="" />
</p>
<p>
单选框<input type="radio" checked="0" name="" id="" value="" />
</p>
<p>
单选框<input type="radio" checked="" name="" id="" value="" />
</p>
<p>
单选框<input type="radio" checked="false" name="" id="" value="" />
</p>
<p>
复选框<input type="checkbox" checked="checked" name="" id="" value="" />
</p>
<p>
复选框<input type="checkbox" checked="0" name="" id="" value="" />
</p>
</body>
</html>
The effect is as follows:
3. Check the box and add label
When the label encloses the check box, clicking the element in the label can also operate the check box.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
label{
user-select: none;
}
</style>
</head>
<body>
<p>
<label>
单选框<input type="radio" name="" id="" value="" />
</label>
</p>
<p>
<label>
复选框<input type="checkbox" checked="0" name="" id="" value="" />
</label>
</p>
</body>
</html>The effect is as follows:
4. Single selection boxes into groups
Only one radio button can be selected as a group (ie: add the same name attribute to the radio button group),
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
label {
user-select: none;
}
</style>
</head>
<body>
<div>
<p>选择性别:</p>
<label>
男<input name="sex" type="radio" name="" id="" value="" />
</label>
<label>
女<input name="sex" type="radio" name="" id="" value="" />
</label>
<p>选择你最爱玩的游戏:</p>
<label>
游戏1<input name="game" type="radio" name="" id="" value="" />
</label>
<label>
游戏2<input name="game" type="radio" name="" id="" value="" />
</label>
<label>
游戏3<input name="game" type="radio" name="" id="" value="" />
</label>
<label>
游戏4<input name="game" type="radio" name="" id="" value="" />
</label>
</div>
</body>
</html>
effect:
5. JS operation operation list check box
You can click here if you haven't played document.querySelector ;
<!DOCTYPE html>
<html>
<body>
<div>
单选框
<input type="radio" name="" id="" value="" />
<input type="radio" name="" id="" value="" />
</div>
<div>
复选框
<input type="checkbox" name="" id="" value="" />
<input class="checkbox2" type="checkbox" name="" id="" value="" />
</div>
</body>
<script type="text/javascript">
document.querySelector("input").checked = true
document.querySelectorAll("input")[1].setAttribute("checked",false)
document.querySelector("input[type=checkbox]").checked = true
document.querySelector(".checkbox2").setAttribute("checked",false)
</script>
</html>
note:
1. Checkele.checked assignment except for 0, null, "", undefined, false, all other values are checked;
2.checkele.setAttribute("checked", keyvalue), setAttribute is connected to a key-value pair, no matter what value is selected;
3. The essence of setAttribute is to set attributes for the node, which has the same effect as adding the checked attribute directly to the HTML node.
effect
6. Check the box to modify the style
Remove the default style
The checkbox only supports writing width and height by default, but customers often have fancy styles
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input[type=radio]{
width: 40px;
height: 40px;
background: yellow;
}
.radio1{
-webkit-appearance: none;
}
</style>
</head>
<body>
<input type="radio" name="" id="" value="" />
<input class="radio1" type="radio" name="" id="" value="" />
</body>
<script type="text/javascript">
</script>
</html>
Here are some checkbox styles written by myself
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
color: #666;
font-size: 12px;
}
input[type=checkbox],
input[type=radio] {
-webkit-appearance: none;
outline: none;
}
/* 单选框 */
.radiobox input[type=radio] {
width: 20px;
height: 20px;
border-radius: 20px;
border: 2px solid #999;
}
.radiobox input[type=radio]:checked {
background: url(asset/img/gou.png);
background-size: 100% 100%;
border: none;
}
.checkbox input[type=checkbox] {
width: 20px;
height: 20px;
background: #0EA0ED;
position: relative;
}
.checkbox input[type=checkbox]:checked {
background: #0EA0ED;
overflow: hidden;
border: none;
}
.checkbox input[type=checkbox]:checked::before {
content: "";
width: 5px;
height: 11px;
position: absolute;
top: 1px;
left: 6px;
border-bottom: 3px white solid;
border-right: 3px white solid;
transform: rotate(45deg);
}
.switchbox input{
width: 50px;
height: 20px;
background: #F880AB;
border-radius: 20px;
position: relative;
/* box-shadow: 0 0 10px rgba(0,0,0,.1); */
}
.switchbox input::before{
content: "";
width: 24px;
height: 24px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.1);
position: absolute;
left: -2px;
top: -2px;
border-radius: 50%;
}
.switchbox input:checked{
background: #F40057;
}
.switchbox input:checked::before{
content: "";
width: 24px;
height: 24px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.1);
position: absolute;
left: auto;
right: -2px;
top: -2px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="radiobox">
<p>单选框</p>
<input type="radio" name="sex" id="" value="" />
<input type="radio" name="sex" id="" value="" />
<input type="radio" name="sex" id="" value="" />
<input type="radio" name="sex" id="" value="" />
<input type="radio" name="sex" id="" value="" />
</div>
<div class="checkbox">
<p>复选框</p>
<input type="checkbox" name="sex1" id="" value="" />
<input type="checkbox" name="sex1" id="" value="" />
<input type="checkbox" name="sex1" id="" value="" />
<input type="checkbox" name="sex1" id="" value="" />
<input type="checkbox" name="sex1" id="" value="" />
</div>
<div class="switchbox">
<p>开关</p>
<input type="checkbox" name="" id="" value="" />
</div>
</body>
</html>
7.css to achieve the click effect of the check box
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
color: #666;
font-size: 12px;
}
input[type=checkbox],
input[type=radio] {
-webkit-appearance: none;
outline: none;
}
input[type=checkbox]:active,
input[type=radio]:active {
box-shadow: 0 0 10px rgba(0,0,0,.4);
}
/* 单选框 */
.radiobox input[type=radio] {
width: 20px;
height: 20px;
border-radius: 20px;
border: 2px solid #999;
}
.radiobox input[type=radio]:checked {
background: url(asset/img/gou.png);
background-size: 100% 100%;
border: none;
}
.checkbox input[type=checkbox] {
width: 20px;
height: 20px;
background: #0EA0ED;
position: relative;
}
.checkbox input[type=checkbox]:checked {
background: #0EA0ED;
overflow: hidden;
border: none;
}
.checkbox input[type=checkbox]:checked::before {
content: "";
width: 5px;
height: 11px;
position: absolute;
top: 1px;
left: 6px;
border-bottom: 3px white solid;
border-right: 3px white solid;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="radiobox">
<p>单选框</p>
<input type="radio" name="sex" id="" value="" />
<input type="radio" name="sex" id="" value="" />
<input type="radio" name="sex" id="" value="" />
<input type="radio" name="sex" id="" value="" />
<input type="radio" name="sex" id="" value="" />
</div>
<div class="checkbox">
<p>复选框</p>
<input type="checkbox" name="sex1" id="" value="" />
<input type="checkbox" name="sex1" id="" value="" />
<input type="checkbox" name="sex1" id="" value="" />
<input type="checkbox" name="sex1" id="" value="" />
<input type="checkbox" name="sex1" id="" value="" />
</div>
</body>
</html>
On the second day of work, I fished. The writing is not good, so please show me a lot.