javascript 如何使用javascript删除复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19650108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to delete a check box using javascript
提问by Santosh459
I'm working on this HTML Page where i can add a check-box along with the label by clicking the add button, is there anyway that i can have a delete button as well so that when i select a check-box and press the delete button the check-box along with the text box is deleted??Please find my code below!!
我正在处理这个 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>
回答by pai.not.pi
Sample HTML
示例 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>
In pure javascript, you can do this,
在纯 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);
}
回答by Nick Chapman
Give all of the check boxes that could potentially be deleted the same class. Additionally label all of the text boxes that could be deleted with their own class. My check boxes will be labeled with chk and my text boxes will be labeled with txt. As in:
为所有可能被删除的复选框指定同一个类。另外标记所有可以用它们自己的类删除的文本框。我的复选框将标有 chk，而我的文本框将标有 txt。如：
<input type="checkbox" class = 'chk' /> and
<input type="text" class = 'txt' />
The following solution should work as long as check boxes and text fields are 1 to 1.
只要复选框和文本字段是 1 比 1，以下解决方案就应该有效。
the function you will add to your delete button will loop through all of the check boxes and see if they are deleted and then delete the checked ones.
您将添加到删除按钮的功能将遍历所有复选框，查看它们是否被删除，然后删除选中的复选框。
Heres the JS:
继承人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);
}
}
}
That will delete all of the checked check boxes, all you have to do now is make a button and add that function as an onclick.
这将删除所有选中的复选框，您现在要做的就是创建一个按钮并将该功能添加为 onclick。
<input type="button" value="Delete checked boxes" onclick = "delBoxes();" />
回答by Hariharan
HTML
HTML
<input type="checkbox" id="checkboxid" name="checkboxname">
<button id="btnDeleteid" onclick="deleteCheckBox()" name="btnDeletename">Delete</button>
JavaScript
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.");
}
}
I hope this will help.
我希望这将有所帮助。
Refer fiddle - http://jsfiddle.net/F8w8B/3/
参考小提琴 - http://jsfiddle.net/F8w8B/3/
