1.最初にチェックボックスを確認します
HTMLに触れ、チェックボックスに触れました...
<!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>
効果は次のとおりです。
ラジオボタンが単独で存在する場合、チェックした後はキャンセルできません。
2.チェックボックスはデフォルトでチェックされています
チェックされた属性がラベルに追加されると、属性値があるかどうか、または属性値が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>
効果は次のとおりです。
3.チェックボックスをオンにして、ラベルを追加します
ラベルがチェックボックスを囲んでいる場合、ラベル内の要素をクリックしてチェックボックスを操作することもできます。
<!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>効果は次のとおりです。
4.単一の選択ボックスをグループに
グループとして選択できるラジオボタンは1つだけです（つまり、同じ名前属性をラジオボタングループに追加します）。
<!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>
効果：
5.JS操作操作リストチェックボックス
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>
注意：
1. 0、null、 ""、undefined、falseを除くCheckele.checked割り当て、他のすべての値がチェックされます;
2.checkele.setAttribute（ "checked"、keyvalue）、setAttributeは、選択されている値に関係なく、キーと値のペアに接続されます。
3. setAttributeの本質は、ノードの属性を設定することです。これは、チェックされた属性をHTMLノードに直接追加するのと同じ効果があります。
効果
6.チェックボックスをオンにしてスタイルを変更します
デフォルトのスタイルを削除します
チェックボックスはデフォルトで幅と高さの書き込みのみをサポートしますが、顧客は多くの場合、派手なスタイルを持っています
<!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>
これが私自身が書いたチェックボックススタイルです
<!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
<!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>
仕事の2日目に、私は釣りをしました。文章が苦手なので、たくさん見せてください。