如何包括檢查HTML側欄中的所有盒

我已經在谷歌的文檔側邊欄生成複選框下面的代碼：如何包括檢查HTML側欄中的所有盒

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傳遞給另一個函數？

來源

2017-02-23 utphx

看起來您正在客戶端代碼中構建HTML。我的經驗是，在服務器上構建HTML會更快。但這是個人偏好。我使用一個模板HTML文件，然後使用HTML服務來評估模板。我發現在一個文件中佈局HTML更容易。我添加了DOM標籤，如果你想保持你目前的方式。目前，這確實不是Apps Script問題。 –

@SandyGood我可以嘗試服務器端。任何提示創建選擇所有複選框，並將選定的傳遞給另一個功能？ – utphx

下面是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 。但那是另一個問題。

來源

2017-02-23 23:09:33

謝謝，我能夠使用您的代碼作爲指導來創建全選，全部清除，並動態構建複選框，效果很好。 – utphx

如何包括檢查HTML側欄中的所有盒

回答

相關問題