您的位置:首页> 实例代码> HTML实例

checkbox name属性值注意点

2019-7-10 22:41| 作者: admin| 查看: 3708| 评论: 0|来自: 蚂蚁部落

关于复选框checkbox基本用法可以参阅HTML input checkbox 复选框一章节。

本文单独介绍一下name属性一些注意点,可能会对初学者造成一定的困扰。

name属性用于命名当前复选框,更重要的作用是,提交表单后,后台通过name属性值接收数据。

下面通过一段简单的代码实例进行分析:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
input{
  width:15px;
  height:15px;
  border:1px dotted blue;
}    
</style>    
</head>
<body>
具备的技能:
<input type="checkbox" name="a"/> 前端
<input type="checkbox" name="b"/> 后端
<input type="checkbox" name="c"/> PS
</body>
</html>

上面代码具有三个复选框,目的是选中所具备的技能。

就以C#后台接收数据为例,代码片段如下:

[C#] 纯文本查看 复制代码
String jineng = Request.Form["a"];

上述代码可以接收name属性值为"a"的复选框的值,还有另外两个复选框的值没有接收。

难道每一个复选框都要通过上述类似代码接收一次吗,此种方式不能说不行,但是任何实际项目中都不会这么用。

只要将同一类复选框的name属性值设置为相同即可,代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
input{
  width:15px;
  height:15px;
  border:1px dotted blue;
}    
</style>    
</head>
<body>
具备的技能:
<input type="checkbox" name="jishu"/> 前端
<input type="checkbox" name="jishu"/> 后端
<input type="checkbox" name="jishu"/> PS
</body>
</html>

上述代码将复选框的name属性值修改为"jishu",后台代码修改如下:

[C#] 纯文本查看 复制代码
String jineng = Request.Form["jishu"];

这样的话,就可以接收到选中复选框的值,也就是说同一类复选框的name属性值设置为相同即可。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部