多选框

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>复选框全选、全不选和反选的效果实现</title>
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function checkAll() {
for (var j = 1; j <= 9; j++) {
box = eval("document.checkboxform.C" + j);
if (box.checked == false) box.checked = true;
   }
}

function uncheckAll() {
for (var j = 1; j <= 9; j++) {
box = eval("document.checkboxform.C" + j);
if (box.checked == true) box.checked = false;
   }
}

function switchAll() {
for (var j = 1; j <= 9; j++) {
box = eval("document.checkboxform.C" + j);
box.checked = !box.checked;
   }
}
//  End -->
</script>
</head>

<body>

<form name=checkboxform>
<input type=checkbox name=C1 checked>C1<br>
<input type=checkbox name=C2 checked>C2<br>
<input type=checkbox name=C3 checked>C3<br>
<input type=checkbox name=C4 checked>C4<br>
<input type=checkbox name=C5 checked>C5<br>
<input type=checkbox name=C6 checked>C6<br>
<input type=checkbox name=C7 checked>C7<br>
<input type=checkbox name=C8 checked>C8<br>
<input type=checkbox name=C9 checked>C9<br>
<br>
<input type=button value="全部选中" onClick="checkAll()"><br>
<input type=button value="全部不选" onClick="uncheckAll()"><br>
<input type=button value="选择转换" onClick="switchAll()"><br>
</form>
<p><a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
</body>
</html>
时间: 2024-11-03 05:50:14

多选框的相关文章

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不

[CSS揭秘]自定义单选框和复选框

很多Web前端工程师肯定都会遇到过,在项目中,UI设计师跑来跟你说,我这个地方的表单控件需要设计成这个样子那个样子.但是用CSS却不能够修改这些控件的默认样式,于是乎,只能通过div+javascript技术来进行模拟.特别是在如今移动端的崛起时代,更加注重用户的体验.于是就更加需要这样一种hack技术. 如果对如今的前端框架有过了解,都会知道组件这个概念.那么在这些框架中,都会提供一些单选框或复选框按钮组件.可见大家之前受到表单元素的默认样式的毒害有多深. 今天先给大家简单介绍一下如何通过CS

学习15 单选框/多选框标签

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>单选框/复选框</title> </head> <body> <form action="save.php" method="p

HTML页面中A博娱乐复选框的操作方法

A博娱乐复选框在网页中很是常见,无论是电商网站,还是平台,只有有需要选择的地方就会见到复选的身影.接下来,是我之前写过的两个小demo,都是关于复选框的,希望会给大家带来帮助. 第一个是关于复选框全选反选的操作,当然我在里面还加了一个小功能,就是当选择底下尚品或者其他的东西的复选框全部为选中状态时则全选按钮也变为选中状态:反之亦然. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3

CSS 美化复选框 - 无图片方式

今天和大家分享一个不使用图片美化复选框的方式.来看下效果图吧,如下是3种不同状态下的效果: 一. Html结构 <div class="check-wrap"> <input type="checkbox" class="icheck" id="icheck" /> <label for="icheck" class="ilabel"></lab

Spring MVC-表单(Form)标签-复选框(Checkbox)示例(转载实践)

以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_checkbox.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显示如何使用Spring Web MVC框架在窗体中使用单个复选框.首先,让我们使用Eclipse IDE,并按照以下步骤使用Spring Web Framework开发基于动态窗体的Web应用程序: 步骤 描述 1 创建一个名为HelloWeb的项目,在一个包com.tutorialspoint

多选框checkbox全选全不选和反选

在判断多选框中的某一个是否被选中时,我们可以用checked的属性 选中了就返回true,没被选中就返回false; 这是html代码: <form action="#"> <label for="hobby">爱好:</label> <label for="hobby1"> <input type="checkbox" name="hobby" id=

vue.js实现单选框、复选框和下拉框

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label

jquery实现复选框全选,全不选,反选中的问题

今天试了一下用jquery选择复选框,本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法. html代码如下(这里没有用任何样式,就没有再放css了): <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="test_ch5.css" > <title>test_ch5</title> &

bootstrap table保留多选框的分页

initialize : function(options) { this.options = options.options; this.tableNum=options.tableNum; this.selectActive=[]; this.selections=[]; this.selectionIds=[]; this.nowPage; this.selectPage=[]; Table.prototype.initialize.call(this, this.options); },