dojo-复选框

1、问题背景

设计一组复选框,并获取复选框的值

2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>dojo-复选框</title>
		<link rel="stylesheet" href="../js/dojo-release-1.11.1-src/dijit/themes/claro/claro.css" />
		<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="../js/dojo-release-1.11.1-src/dojo/dojo.js"></script>
		<style>
			body,html{
				width: 99%;
				height: 99%;
				font-family: "微软雅黑";
				font-size: 12px;
				overflow: hidden;
			}
		</style>
		<script>
            dojoConfig={async:true,parseOnLoad:true}
        </script>
		<script>
			require(["dijit/form/CheckBox", "dojo/domReady!"], function(CheckBox){
			    var checkBox = new CheckBox({
			        name: "checkBox",
			        value: "男",
			        checked: false,
			        onChange: function(b){
			        	alert(this.get(‘value‘) );
			        }
			    }, "man").startup();

			   var checkBox1 = new CheckBox({
			        name: "checkBox",
			        value: "女",
			        checked: false,
			        onChange: function(b){
			        	alert(this.get(‘value‘) );
			        }
			    }, "woman").startup();
			});
		</script>
	</head>
	<body class="claro">
		<input id="man" />
		<label for="man">男</label>
		<input id="woman" />
		<label for="woman">女</label>
	</body>
</html>

3、实现结果

(1)当勾选“男”时

(2)当勾选“女”时

时间: 2024-12-18 07:30:44

dojo-复选框的相关文章

dojo中创建包含节点复选框的树形(CheckBoxTree)

树形结构是界面设计程中常见的部件,在代码实现时有很多方法,但由于设计到节点的父子关系和dom节点操作,实现起来比较复杂.dojo中提供了带复选框的树形部件CheckBoxTree,使用时只需创建对应的实例即可轻松实现此功能. 部件对应的html文件代码如下: <div> <div dojoType="dijit.Dialog" dojoAttachPoint="testList" title="${title}" style=&

dojo:为数据表格添加复选框

一.添加复选框 此时应该选用EnhancedGrid,而不是普通的DataGrid.添加复选框需要设置EnhancedGrid的plugins属性,如下: gridLayout =[{ defaultCell: { type: cells._Widget, styles: 'text-align: center;' }, cells: [ { name: "WBS", field: "wbsCode", width: "60px"}, { nam

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

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

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

jquery中input复选框的checked属性

在今日的多选,反选,全选试验中,关于通过jQuery方法来实现复选框的选中与否问题,我有了以下发现: 1.不能通过.css('checked','checked')方法来设置或者获取复选框的checked属性,在控制台打印输出.css('checked'),结果为undefined, 不管在HTML中是否设置了checked='checked'; 2.通过attr添加属性即.attr('checked','abc'),会给HTML中input所在处添加checked='checked'这样的代码