Javascript 检查/取消选中所有复选框并将值写入 textarea

Posted 2023-05-07

【中文标题】Javascript 检查/取消选中所有复选框并将值写入 textarea

【英文标题】：Javascript check/uncheck all checkboxes and write values to textarea

【发布时间】：2015-06-01 04:08:29

【问题描述】：

这是我的第一个 js 脚本，所以请对我温柔:)​​

问题是当我单击检查所有按钮时，所有复选框都被选中，但它不会将值写入 textarea，如果我单击单个复选框，则添加/删除值，没关系，我只是卡住了在那个全选/取消全选按钮上。

http://jsfiddle.net/LAcgE/74/

function check(chk) 
    for (i = 0; i < chk.length; i++)
    chk[i].checked = true ;


function uncheck(chk) 
    for (i = 0; i < chk.length; i++)
    chk[i].checked = false ;


var itemsAdded = Array();

function movetext(text)  
    var i = itemsAdded.indexOf(text)
    if ( i >= 0)  
        itemsAdded.splice(i,1); 
    
    else 
        itemsAdded.push(text);
    
    document.getElementById("result").value=itemsAdded.join("\n"); 

<form action='#' method='post'>

  <input type='checkbox' value='aaa' name="add" onclick='movetext(this.value)'/>a
  <input type='checkbox' value='bbb' name="add" onclick='movetext(this.value)'/>b
  <input type='checkbox' value='ccc' name="add" onclick='movetext(this.value)'/>c
  <input type='checkbox' value='ddd' name="add" onclick='movetext(this.value)'/>d
  <input type='checkbox' value='eee' name="add" onclick='movetext(this.value)'/>e
    
  <input type="button" value="check all" onClick="check(this.form.add)">
  <input type="button" value="uncheck all" onClick="uncheck(this.form.add)">
    
  <textarea id="result" rows="8" cols="40"></textarea>
  <input type="submit" value="Submit">

</form>

【参考方案1】：

用这个替换你的检查和取消检查功能

function check(chk) 
    for (i = 0; i < chk.length; i++)
    
        chk[i].checked = true ;
        movetext(chk[i].value);
    


function uncheck(chk) 
    for (i = 0; i < chk.length; i++)
    
        chk[i].checked = false ;
        movetext(chk[i].value);
    

您只需要手动调用其他方法。我在你的小提琴里试过了。

【讨论】：

你可能想重写你的 movetext 方法。如果您选中所有，然后取消选中其中一个框，它们将变得不同步。这也发生在你原来的小提琴中。

它有效！但是当我手动检查“a”，然后“取消选中所有”按钮时，应该清除文本区域，而不是填充 b、c、d、e 值:) 自己尝试:)

啊，你也发现了 :) 你能帮忙解决那个 movetext 功能还是我应该创建新问题？

我现在有点忙于想办法重写 movetext 方法。它可能应该在再次添加之前检查文本是否存在，反之亦然。或者也许取消选中所有应该调用一个清除框的方法并检查所有相反。

你太棒了，它在所有组合中都能完美运行 :) 你让我等待 90 分钟来发布一个新问题 :)

【参考方案2】：

您忘记在 check() 和 uncheck() 函数中调用 movetext() 函数。 勾选/取消勾选后添加：

movetext(chk[i].value);