`
jsjxqjy
  • 浏览: 116307 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

简单的 div checkbox

阅读更多

晚上师傅交我 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全选,反选

    三种方式实现checkbox全选,反选,最简单的js技术;基于java代码,简单易懂,提供三3个demo,每一个都能实现

    div模拟radio和checkbox

    简单实用的自定义radio和checkbox

    dtree树形菜单(有带checkbox实现)

    本工程使用dTree组件实现树形菜单的展示 有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 ...菜单既有普通的树结构展示,也有方便做权限等功能的带选择框的展示(含带默认选中checkbox的处理)

    js实现点击切换checkbox背景图片的简单实例

    在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现。如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景为蓝色...

    checkbox批量选中,获取选中项的值的简单实例

    checkbox批量选中,获取选中项的值的简单实例 &lt;!doctype html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;Document&lt;/title&gt; [removed][removed] &lt;/head&gt; &...

    好看的CSS3的单选复选按钮美化样式.zip

    几个风格好看的CSS3单选复选按钮美化样式,简单的表单单选框、复选框美化代码。 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;好看的CSS3单选复选按钮美化样式&lt;/title&gt; &lt;link rel=...

    angular-material-checkbox:使用Google材质设计图标的简单角度复选框指令

    ###主要特征使用Google材质字体图标在div中显示复选框仅显示一个复选框或带有嵌入式标签的复选框标签也是可点击的如果图标以特定方式使用,则较旧的IE(在IE 7+中经过测试)支持易于使用且可完全自定义入门下载该...

    js点击文本框弹出可选择的checkbox复选框

    本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展。...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....

    JavaScript特效大全.rar

    图片列表:鼠标移入/移出改变图片透明度 简易选项卡 简易JS年历 单一按钮显示/隐藏一播放列表收缩展开 提示框效果 鼠标移过,修改图片路径 复选框(checkbox)全选/全不选/返选 用typeof查看数据类型等很多

    Angular.JS判断复选框checkbox是否选中并实时显示

    首先来看看简单的效果图,如下所示: 看一下html代码: &lt;!DOCTYPE html&gt; &lt;html data-ng-app=App&gt; &lt;head&gt; [removed][removed] [removed][removed] &lt;/head&gt; &lt;body data-ng-controller=...

    基于jQuery的控件源码

    Checkbox树(可能是静态树也可能是异步树),用于选择(如选择组织机构,选择数据字典项)等,最好是能够支持节点级联(这个是难点) 能够承载大数据量,并性能表现优异 能够在主流浏览器中运行良好 4、GridView...

    jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用...&lt;div&gt; &lt;input type="checkbox" name="check" value="1"/&gt;复选框1 &lt;input type="checkbox" nam

    用原生JS实现简单的多选框功能

    input id="cheakAll" type="checkbox"&gt;全选 &lt;div&gt; &lt;input type="checkbox"&gt; &lt;input type="checkbox"&gt; &lt;input type="checkbox"&gt; &lt;input type="checkbox"&gt; &lt;input type="checkbox"&gt; ...

    checkground:一个简单的jQuery插件,它使用易于设置样式的div元素替换了默认的复选框控件

    检查场描述checkground是一个简单的jQuery插件,它使用易于设置样式的div元素替换了默认的复选框控件。 checkground隐藏原始元素,并根据背景状态更新选中的属性Checkground元素的元素。安装及使用下载或克隆存储库...

    jQuery完全实例.rar

    &lt;p&gt;one&lt;/p&gt; &lt;div&gt;&lt;p&gt;two&lt;/p&gt;&lt;/div&gt; &lt;p&gt;three&lt;/p&gt; jQuery 代码: $("div &gt; p"); 结果: [ &lt;p&gt;two&lt;/p&gt; ] -------------------------------------------------------------------------------- 在文档的第一个表单...

    一个基于oracle 数据库的struts 的例子的源文件

    一个struts 开发的小项目的源文件,简单的增加,删除,修改功能 oracle数据库,简单的运用div+css 布局,美化页面。checkbox的多选择的实现

    简单网站后台管理

    简易的网站后台管理代码 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 后台管理系统登录 ; charset=gb2312"&gt; TD { FONT-...

Global site tag (gtag.js) - Google Analytics