晚上师傅交我 div checkbox ,现在整理如下:
1.首先需要创建对象
//添加对象
function addObj(){
var contain = $("container");
var checkBox1 = document.createElement("input");
checkBox1.type= "checkbox";
checkBox1.name="abc";
checkBox1.id="abc";
checkBox1.value="abc_value";
var label_ = document.createElement("span");
label_.id="d";
label_.innerHTML= "d";
contain.appendChild(checkBox1 );
contain.appendChild(label_);
setChecked();
}
2.初始化chekbox
//初始化checkbox被选中
function setChecked()
{
var d=document.getElementById("container");
var c=d.childNodes.length ;
for(var k=0;k<c;k++)
{
if(d.childNodes[k].tagName=="INPUT")
{
if(d.childNodes[k].type=="checkbox")
{
d.childNodes[k].checked=true;
}
}
}
}
3.点击其中的一个checkbox ,就删除这个
//删除对象
function cancelItem(){
var d=document.getElementById("container");
var r=document.getElementsByName("abc");
for(var i=0;i<r.length;i++){
if(r[i].checked == false){
//获取当前对象相邻的对象
var nextObj = r[i].nextSibling;
d.removeChild(r[i]);
d.removeChild(nextObj);
}
}
}
4.获取需要提交的所有checkbox的值
//获取需要提交的值
function getSelectedValues(){
var subValues = "";
var r=document.getElementsByName("abc");
for(var i=0;i<r.length;i++){
if(r[i].checked == true){
//获取被选中的checkbox的值
subValues+= r[i].value+",";
}
}
return subValues;
}
function $(id){return document.getElementById(id);}
代码已经上传,可以下载使用
分享到:
相关推荐
三种方式实现checkbox全选,反选,最简单的js技术;基于java代码,简单易懂,提供三3个demo,每一个都能实现
简单实用的自定义radio和checkbox
本工程使用dTree组件实现树形菜单的展示 有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 ...菜单既有普通的树结构展示,也有方便做权限等功能的带选择框的展示(含带默认选中checkbox的处理)
在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现。如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景为蓝色...
checkbox批量选中,获取选中项的值的简单实例 <!doctype html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> [removed][removed] </head> &...
几个风格好看的CSS3单选复选按钮美化样式,简单的表单单选框、复选框美化代码。 <!DOCTYPE HTML> <html> <head> <title>好看的CSS3单选复选按钮美化样式</title> <link rel=...
###主要特征使用Google材质字体图标在div中显示复选框仅显示一个复选框或带有嵌入式标签的复选框标签也是可点击的如果图标以特定方式使用,则较旧的IE(在IE 7+中经过测试)支持易于使用且可完全自定义入门下载该...
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展。...
站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....
图片列表:鼠标移入/移出改变图片透明度 简易选项卡 简易JS年历 单一按钮显示/隐藏一播放列表收缩展开 提示框效果 鼠标移过,修改图片路径 复选框(checkbox)全选/全不选/返选 用typeof查看数据类型等很多
首先来看看简单的效果图,如下所示: 看一下html代码: <!DOCTYPE html> <html data-ng-app=App> <head> [removed][removed] [removed][removed] </head> <body data-ng-controller=...
Checkbox树(可能是静态树也可能是异步树),用于选择(如选择组织机构,选择数据字典项)等,最好是能够支持节点级联(这个是难点) 能够承载大数据量,并性能表现优异 能够在主流浏览器中运行良好 4、GridView...
昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用...<div> <input type="checkbox" name="check" value="1"/>复选框1 <input type="checkbox" nam
input id="cheakAll" type="checkbox">全选 <div> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> ...
检查场描述checkground是一个简单的jQuery插件,它使用易于设置样式的div元素替换了默认的复选框控件。 checkground隐藏原始元素,并根据背景状态更新选中的属性Checkground元素的元素。安装及使用下载或克隆存储库...
<p>one</p> <div><p>two</p></div> <p>three</p> jQuery 代码: $("div > p"); 结果: [ <p>two</p> ] -------------------------------------------------------------------------------- 在文档的第一个表单...
一个struts 开发的小项目的源文件,简单的增加,删除,修改功能 oracle数据库,简单的运用div+css 布局,美化页面。checkbox的多选择的实现
简易的网站后台管理代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 后台管理系统登录 ; charset=gb2312"> TD { FONT-...