如何使用javascript删除复选框_Javascript_Html_Checkbox

如何使用javascript删除复选框

javascript html checkbox

如何使用javascript删除复选框,javascript,html,checkbox,Javascript,Html,Checkbox,我正在处理这个HTML页面，我可以通过单击“添加”按钮来添加一个复选框和标签，是否还有一个“删除”按钮，这样当我选中一个复选框并按下“删除”按钮时，复选框和文本框都会被删除？请在下面找到我的代码 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="te

我正在处理这个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>


函数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（复选框）；
输出。追加子项（inps）；
output.appendChild（document.createElement（'br'））；
}

HTML

我希望这会有所帮助

请参阅fiddle-

示例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);
}

var rmvBtn=document.getElementById（'rmvBtn'）；
rmvBtn.addEventListener（'click'，function（）{
var rmvcheckbox=document.getElementsByName（'test'）；
对于（变量i=0；i


给出可能在同一类中删除的所有复选框。另外，标记所有可以用自己的类删除的文本框。我的复选框将用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);
        }
    }
}

函数delbox（）{
var-box=document.getElementsByClassName（'chk'）；
var text=document.getElementsByClassName（'txt'）；
对于（var i=0；我能看到您的try代码来帮助您吗？或者提供JSFIDLE？发布您的代码时，最好制作一个FIDDLE。如果存在我的try代码的可能副本above@Santosh459根据您的要求更新答案。请勾选Hi hariharan，此代码中有添加多个复选框的规定。我可以通过勾选来删除所有复选框吗单击“删除”按钮？？是，如果您能够获取组件的引用，则可以将其全部删除。如果您希望全部删除，请放置一个父div并在该div内添加所有复选框。调用该父div并将其删除。
<input type="checkbox" class = 'chk' /> and
<input type="text" class = 'txt' />

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();" />