首页 > 代码库 > 自学篇之--js 提取复选框和单选框的值 和纯css的3D按钮
自学篇之--js 提取复选框和单选框的值 和纯css的3D按钮
<html>
<head>
<meta charset="utf-8" content="text/htnl">
<title>button</title>
<style type="text/css">
a.button{
position:relative;
width: 80px;
height: 50px;
background-color: red;
display: block;
text-align: center;
margin: 100px auto;
border-radius:8px;
box-shadow:0px 9px 0px rgba(219,31,5,1),0px 9px 9px #333;
text-decoration: none;
}
a.button:ACTIVE {
position:relative;
width: 80px;
height: 80px;
background-color: red;
display: block;
text-align: center;
margin: 100px auto;
border-radius:8px;
box-shadow:0px 2px 0px rgba(219,31,5,1),0px 2px 9px #333;
text-decoration: none;
}
</style>
</head>
<body>
<!-- 一个3D的按钮，最简单的部分-->
<a class="button" href="">click</a>
<!--提取单选框和复选框的值 -->
<form action="">
<input type="radio" name="radio" value="http://www.mamicode.com/1">1
<input type="radio" name="radio" value="http://www.mamicode.com/2">2
<input type="button" onclick="singlechk()" value="http://www.mamicode.com/提交">
</form>
<form action="">
<input type="checkbox" name="checkbox" value="http://www.mamicode.com/11">11
<input type="checkbox" name="checkbox" value="http://www.mamicode.com/12">12
<input type="checkbox" name="checkbox" value="http://www.mamicode.com/13">13
<input type="button" onclick="chk()" value="http://www.mamicode.com/提交">
</form>
</body>
<script type="text/javascript">
function chk() {
var value="";
var obj=document.getElementsByName(‘checkbox‘);
for(var i=0; i<obj.length;i++){
if(obj[i].checked){
if(i==obj.length-1)
value+=obj[i].value;
else value+=obj[i].value+"和";
}
}
alert("您选择的是："+value);
}
function singlechk() {
var s="";
var obj=document.getElementsByName(‘radio‘);
for(var i=0;i<obj.length;i++){
if(obj[i].checked)
s+=obj[i].value;
}
alert("您选择的是："+s);
}
</script>
</html>
自学篇之--js 提取复选框和单选框的值 和纯css的3D按钮