HTML页面中的的美化checkbox

很多美工在设计页面是,为了美化页面经常使用图片来代替checkbox,

html如下:

<div class="checklayout">
	<div class="checkbox01">
		<img src="../images/checkbox01_noclick.png" name="hobby" id="01">
	</div>
<div class="checkword01">苹果</div>

这时候要如何获取到值呢?

jquery:

		var hobby;
		var obj = $("img[name='hobby']");
		if ("../images/checkbox01_click.png" == obj.attr("src");) {
			hobby = obj.attr("id");
		}

我的个人博客:http://blog.caicongyang.com ;

我的个人网站:http://www.caicongyang.com ;

我的CSDN博客地址: http://blog.csdn.net/caicongyang ;

时间: 2024-10-08 10:04:16

HTML页面中的的美化checkbox的相关文章

如何获取上一个页面中checkbox控件选中的值

php开发中,<php开发中.<php开发中.如何获取上一个页面中checkbox控件选中的值呢?并输出出来,以下是代码示例: <? $music=$_POST['music']; //取得所选中的checkbox个数 $coun=count$music; ifis_arrai$music{ echo'您选择的 : '; foreach$musicas$kei=>$var echo'  ['.$var.']'; echo$key; } ?> *****************

jQuery基础学习5——JavaScript方法获取页面中的元素

给网页中的所有<p>元素添加onclick事件 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head>

使用HTML5的JS选择器操作页面中的元素

上一篇文章介绍了HTML5新增的JavaScript选择器,今晚正式实践一下,使用HTML5的JS选择器操作页面中的元素. 文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用HTML5的JS选择器操作页面中的元

页面中公用的全选按钮,单选按钮组件的编写

相应的js代码为: var checkAll = $("[data-checkbox-checkall]"); //遍历处理每一组的情况 checkAll.each(function(){ var groupName = $(this).attr("data-checkbox-group"); startCheck(groupName); }); function startCheck(groupName){ //所有的该组元素 var allCheckbox =

在页面中使用拼接字符串的方式显示动态加载的数据

在做页面的时候为了使页面美化,我们经常会用拼接字符串的方式,动态加载后台的数据,这里我们使用的前台框架是bootstrap,但是很多效果还是要用jquery来实现 (1)方法传参与字符串的拼接  (拼接用的replace) 先声明一个展示数据的页面模型(使用过的模型1) var userModel = "<div class=\"itemdiv commentdiv\" style=\"margin-left: 7%;\">"+ &q

权限模块_分配权限_显示树状结构_页面中的选中效果

权限模块__分配权限__显示树状结构1 显示树状结构:依赖关系 setPrivilegeUI.jsp <!-- 显示权限树 --> <td> <!--用它回显 <s:checkboxlist name="privilegeIds" list="#privilegeList" listKey="id" listValue="name"></s:checkboxlist> --

CSS案例 -- 美化checkbox框

在开发项目中,我们经常要美化checkbox框.下面是只用css实现checkbox选中美化 <div class='div-checkbox'> <input type="checkbox" id='handsome' /> <label for='handsome' >我很帅</label> </div> #handsome{ display:none; } .div-checkbox input + label { ba

ckeditor4.x操作之在页面中引入(一)

一.使用方法:1.在页面<head>中引入ckeditor核心文件ckeditor.js <script src="ckeditor/ckeditor.js"></script> 2.在使用编辑器的地方插入HTML控件<textarea> <textarea class="ckeditor"></textarea> 3.将相应的控件替换成编辑器代码 4.配置编辑器 ckeditor的配置都集中在

使用jQuery的data方法来为页面中的某个元素存储数据,(获取焦点,清除默认值)

使用data方法可以避免在DOM中存储数据,有些前端开发er喜欢使用HTML的属性来存储数据: 使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的. 我们可以使用jQuery的data方法来为页面中的某个元素存储数据: html部分: 1 <form id="testform"> 2 <input type="text" class="clear" value="Always cleared&qu