<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>无标题文档</title>
<style>
input{
color:yellowgreen;
position:relative;
border:none;
}
input:before{
content:'*';
background:white;
position:absolute;
width:30px;
height:30px;
font-size:30px;
}
input:checked ~input{
padding:5px;
top:0;
left:0;
color:black;
}
</style>
</head>
<body>
<input type="radio" name="111" checked="checked" />
<input type='radio' name='111'>
<input type='radio' name='111'>
<input type='radio' name='111'>
<input type='radio' name='111'>
<input type='radio' name='111'>
<script>
</script>
</body>
</html>
css里的备注要用/**/;否则会出现问题
这里用的是6个input 第一个子元素隐藏且选中(checked)
其中 原文选中子元素用nth-of-type(n)作为选中状态 我在这里改用nth-child(n)也可以 这两个的区别如下:
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。
提示:请参阅 :nth-child() 选择器,该选择器选取父元素的第 N 个子元素,与类型无关。
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。
n 可以是数字、关键词或公式。
input:checked主要对所有选中状态的input设置css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
input:checked {
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<form action="">
<input type="radio" checked="checked" value="male" name="gender" /> Male<br>
<input type="radio" value="female" name="gender" /> Female<br>
<input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
<input type="checkbox" value="Car" /> I have a car
</form>
</body>
</html>
<input type="radio" checked="checked" value="male" name="gender" /> Male<br>
<input type="radio" value="female" name="gender" /> Female<br>
如要使之二选一 要使得name为同一个才可以 否则会两个都可以点击
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>无标题文档</title>
</head>
<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号,序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
let hobby=document.getElementsByName('hobby');
for(i=0;i<hobby.length;i++){
hobby[i].checked=true;
}
}
function clearall(){
let hb=document.getElementsByName('hobby');
for(i=0;i<hb.length;i++){
hb[i].checked=false;
}
}
function checkone(){
var j=document.getElementById("wb").value;//获取填写的下标值
var hobby = document.getElementById("hobby"+j);//获取输入的值+下标值
hobby.checked = true; //选中为true
console.log(j)
console.log(hobby)
}
</script>
</body>
</html>