如何使用 javascript 删除复选框
How to delete a check box using javascript
我正在处理这个 HTML 页面,我可以通过单击添加按钮添加一个复选框和标签,无论如何我也可以有一个删除按钮,以便当我选择一个复选框并按删除按钮时,复选框和文本框被删除?请在下面找到我的代码!!
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function Add()
{
var checkbox=document.createElement('input');
var inps=document.createElement('input');
var output=document.getElementById('output');
checkbox.type='checkbox';
inps.type='text';
inps.name='textboxname';
checkbox.name='checkname';
output.appendChild(checkbox);
output.appendChild(inps);
output.appendChild(document.createElement('br'));
}
</script>
</head>
<body>
<form action="http://localhost:9990" method="post">
<span id="output"></span>
<input type="button" value="Add" onclick="Add()">
<center>
<p>
<input type="file" name="datafile" size="40">
</p>
<div>
<input type="submit" value="Send">
</div>
</center>
</form>
</body>
</html>
为所有可能被删除的复选框指定相同的类。 此外,使用自己的类标记所有可以删除的文本框。我的复选框将标有 chk,我的文本框将标有 txt。如:
<input type="checkbox" class = 'chk' /> and
<input type="text" class = 'txt' />
只要复选框和文本字段为 1 比 1,以下解决方案就应该有效。
您将添加到删除按钮的功能将遍历所有复选框,并查看它们是否被删除,然后删除选中的复选框。
这是JS:
function delBoxes(){
var boxes = document.getElementsByClassName('chk');
var texts = document.getElementsByClassName('txt');
for(var i = 0; i<boxes.length; i++){
box = boxes[i];
txt = texts[i];
if(box.checked){
box.parentNode.removeChild(box);
txt.parentNode.removeChild(txt);
}
}
}
这将删除所有选中的复选框,您现在要做的就是创建一个按钮并将该功能添加为点击。
<input type="button" value="Delete checked boxes" onclick = "delBoxes();" />
示例HTML
<div>
<input type='checkbox' value='asd' id='test' name='test' />
<input type='checkbox' value='asd' id='tester' name='test' />
<input type='button' value='remove' id='rmvBtn' />
</div>
在纯javascript中,你可以做到这一点,
var rmvBtn = document.getElementById('rmvBtn');
rmvBtn.addEventListener('click', function(){
var rmvCheckBoxes = document.getElementsByName('test');
for(var i = 0; i < rmvCheckBoxes.length; i++)
{
if(rmvCheckBoxes[i].checked)
{
removeElm(rmvCheckBoxes[i]);
}
}
});
function removeElm(elm){
elm.parentElement.removeChild(elm);
}
JS小提琴
HTML
<input type="checkbox" id="checkboxid" name="checkboxname">
<button id="btnDeleteid" onclick="deleteCheckBox()" name="btnDeletename">Delete</button>
JavaScript
function deleteCheckBox(){
if (document.getElementById('checkboxid').checked){
var answer = confirm('Are you sure you want to delete this checkbox?');
if (answer)
{
$("#checkboxid").remove();
}
}else{
alert("Pls check the checkbox.");
}
}
我希望这会有所帮助。
参考小提琴 - http://jsfiddle.net/F8w8B/3/
相关文章:
- 如何删除'被按压'state from复选框
- 通过选中和取消选中复选框来添加和删除数组中的值
- 取消选中复选框时,从收音机中删除“选中”
- 基于复选框切换删除多边形
- 取消选中特定复选框时,React切换不删除的选择字段
- 单击删除时,从表中删除与选定复选框相对应的行
- 添加和删除复选框,取决于输入值
- Knockoutjs通过选中复选框来删除多个
- Twitter引导程序:删除/切换类似复选框的按钮组的活动状态
- 在复选框取消选中事件中从HTML下拉列表中删除项目
- 通过选中复选框删除多行
- 如何禁用和启用删除按钮,如果未在 GridView 中选中复选框由 Jquery
- 选中复选框时用 innerHTML 添加的文本,取消选中时不会删除
- 如何使用 javascript 删除复选框
- 如何在 JSP 中的“单击”复选框时创建删除按钮
- 使用jquery选中/取消选中复选框添加/删除值
- Salesforce-使用jQuery使用复选框删除表行
- 使用复选框删除本地内存中存储的项目Jquery
- 使用php或javascript中的复选框删除
- OpenLayers复选框删除标签