如何在 html 侧边栏中包含选中所有框

Question

我有以下代码用于在 Google 文档侧边栏中生成复选框：

for( var i = 0;i < values.length; i ++)
        {
        var cb = document.createElement( "input" );
        cb.type = "checkbox";
        cb.id = values[i][1];
        cb.value = values[i][0];
        var text = document.createTextNode( values[i][0].substring(0, 30) );
        var br = document.createElement('br');
        document.getElementById( 'class_list' ).appendChild( cb );
        document.getElementById( 'class_list' ).appendChild( text );
        document.getElementById( 'class_list' ).appendChild( br );     
       }

有没有办法在此列表顶部包含一个全选框，然后将所有选定的值和 ID 传递给另一个函数？

Answer 1

这里是 HTML 和客户端 JavaScript，可以满足您的需求：

<div class="inputFormElement"><!-- Beginning of input -->

  <button onmouseup="checkAllBoxes()">Select All</button>

  <br>
  <br>

  <div class="chkBoxListElement">
    <input type="checkbox" id="idOne" value="1">One<br>
    <input type="checkbox" id="idTwo" value="2">Two<br>
    <input type="checkbox" id="idThree" value="3">Three<br>
    <input type="checkbox" id="idFour" value="4">Four<br>
    <input type="checkbox" id="idFive" value="5">Five<br>
    <input type="checkbox" id="idSix" value="6">Six<br>
  </div>

</div><!-- End of input -->

<script>
window.checkAllBoxes = function() {
  var allCheckBoxes,dataAsString,elementHoldingChkBoxes,i,L,objectOfData,thisChkBox,thisID;

  objectOfData = {};

  elementHoldingChkBoxes = document.getElementsByClassName('chkBoxListElement')[0];
  console.log('elementHoldingChkBoxes: ' + elementHoldingChkBoxes)
  console.log('typeof elementHoldingChkBoxes: ' + typeof elementHoldingChkBoxes)

  allCheckBoxes = elementHoldingChkBoxes.getElementsByTagName('input');//Get all inputs

  L = allCheckBoxes.length;

  for (i=0;i<L;i++) {
    thisChkBox = allCheckBoxes[i];//Get this check box
    if (thisChkBox) {//Not null, undefined or empty string - truthy
      thisChkBox.checked = true;
      thisID = thisChkBox.id;
      objectOfData[thisID] = thisChkBox.value;
    }
  }

  dataAsString = JSON.stringify(objectOfData);//Convert object to a string
  console.log('dataAsString: ' + dataAsString)

  mySecondFunction(objectOfData);
}

window.mySecondFunction = function(data) {
  console.log(data)

}
</script>

如果您希望输入框在加载侧边栏时动态更改，则需要一些代码来构建 HTML。但这是另一个问题。