900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 自学篇之--js 提取复选框和单选框的值 和纯css的3D按钮

自学篇之--js 提取复选框和单选框的值 和纯css的3D按钮

时间:2019-12-14 21:26:13

相关推荐

自学篇之--js 提取复选框和单选框的值  和纯css的3D按钮

独角兽企业重金招聘Python工程师标准>>>

<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="1">1

<input type="radio" name="radio" value="2">2

<input type="button" οnclick="singlechk()" value="提交">

</form>

<form action="">

<input type="checkbox" name="checkbox" value="11">11

<input type="checkbox" name="checkbox" value="12">12

<input type="checkbox" name="checkbox" value="13">13

<input type="button" οnclick="chk()" value="提交">

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。