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

本文深入探讨了前端开发领域的关键技术,包括HTML、CSS、JavaScript等核心语言的使用与实践,以及现代框架如Vue、React和Angular的应用。同时,文章还介绍了前端开发中常用的工具和技术,如Webpack、Babel等,为前端开发者提供全面的技术指南。

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


转载于:https://my.oschina.net/tianyuqin/blog/364812

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值