晚上师傅交我 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);}
代码已经上传,可以下载使用
分享到:
相关推荐
标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框(checkbox)以及全选功能。...总的来说,EasyUI 提供了一套简单易用的工具,使得在网页开发中实现这样的功能变得相对容易。
综上所述,jQuery为开发者提供了便利的API来处理checkbox,使得在网页中实现与用户交互变得更加简单和直观。无论是单个checkbox的控制还是批量操作,jQuery都能轻松应对。通过熟练掌握这些技巧,开发者可以创建更加...
$(this).wrap('<div class="checkbox-cell"></div>'); }); ``` 这段代码会根据`maxPerRow`的值将checkbox分组,每组结束后换行。每个checkbox被包裹在一个`<div>`内,方便用CSS控制样式。 **获取checkbox选中项**...
以下是一个简单的示例: ```html <input type="checkbox" class="myCheckbox" value="1"> <input type="checkbox" class="myCheckbox" value="2"> <!-- 更多checkbox... --> let maxSelection = 3; let ...
### 隐藏LayUI数据表格表头的Checkbox复选框方法详解 #### 背景介绍 在前端开发过程中,经常会使用到LayUI框架搭建网页应用,尤其是在设计复杂的数据展示界面时,LayUI提供了强大的数据表格功能。然而,在某些场景...
### .NET MVC3 使用 CheckBox List(复选框列表)的简单方法 在.NET MVC3框架中,虽然没有直接提供CheckBox List的功能,但可以通过简单的自定义方法来实现这一功能。下面将详细介绍如何在.NET MVC3中使用CheckBox ...
取而代之,我们可以使用CSS创建一个自定义的样式元素,如一个div或者span,然后利用JavaScript控制这个元素与checkbox的交互。以下是一个简单的实现步骤: 1. **HTML结构**:创建一个隐藏的checkbox元素和一个可...
本工程使用dTree组件实现树形菜单的展示 有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 ...菜单既有普通的树结构展示,也有方便做权限等功能的带选择框的展示(含带默认选中checkbox的处理)
每个div内包含一组Checkbox,用户可以勾选Checkbox,然后通过点击左右箭头按钮,将选中的项在两个列表之间移动。接下来,我们将一步步分析如何实现这一功能。 1. **HTML结构**: 首先,我们需要构建基本的HTML布局...
我们可以创建一个自定义的图形元素,如一个`div`,并使用JavaScript监听`checkbox`的`checked`属性变化,动态改变该元素的样式。对于IE浏览器,我们需要使用`attachEvent`而非`addEventListener`,并确保JavaScript...
### Treeview中Checkbox选择问题...这种方法不仅适用于简单的层级结构,而且对于多级嵌套的复杂树结构同样有效。开发者可以根据实际需求进一步扩展和完善这些功能,例如增加全选/全不选按钮、优化DOM操作性能等方面。
以下是一个简单的示例: ```html <input type="checkbox" id="selectAll">全选 <input type="checkbox" name="items" value="1">选项1 <input type="checkbox" name="items" value="2">选项2 <input type="checkbox...
在HTML中,`<input type="checkbox">`是用于创建复选框的元素,但若要实现更高级的交互效果,如动态添加、删除选项,或者显示选定项目的列表,我们需要借助JavaScript。 在这个案例中,我们可以创建一个包含多个`...
例如,创建一个简单的dtree_checkbox实例可能如下: ```html <!DOCTYPE html> <script src="dtree.js"></script> <script src="dtree_checkbox.js"> <div id="treeview"></div> var data = { text: "根...
在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现。如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景为蓝色...
总结来说,C#中获取动态生成的CheckBox值主要有两种策略:一是使用服务器端控件,可以保持Postback状态,二是通过HTML拼接并设置name属性,适用于简单的客户端交互。根据实际应用场景,开发者可以根据需求选择合适的...
<input type="checkbox" v-model="isSelectAll" /> <div class="books-8" :class="alltool ? 'books-8-2' : ''" @click="toggleAll"> 选中全部工具 </div> <!-- CSS --> .books-8 { width: 4rem; border: 0.05...
在现代Web开发中,UI设计追求简洁而直观的交互,其中`checkbox`控件作为基本的表单元素,常用于用户进行多选操作。然而,原生`checkbox`的样式和交互体验有时难以满足设计师和开发者的需求。为了解决这个问题,`...