做星星评分的一些问题、选择的问题

最新推荐文章于 2021-06-21 03:17:50 发布

baidu_41931024

最新推荐文章于 2021-06-21 03:17:50 发布

阅读量148

点赞数

分类专栏：学习途中

本文链接：https://blog.csdn.net/baidu_41931024/article/details/100131935

版权

学习途中专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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>

baidu_41931024

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
做星星评分的一些问题、选择的问题

<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>无标题文档</title> <style> ...
复制链接

扫一扫