在JavaScript中獲取具有相同名稱的多個選中復選框的值-有解無憂

我似乎無法獲得正確的輸出。我不確定我的 for 回圈是否是問題所在。請原諒我的變數名。我知道我知道，我讓它們非常明顯。:) 順便說一句，我應該在這里使用 var 還是 let 可以？

我在某處讀到宣告變數時：

var => 函式范圍

ES6 (ES2015): let, const => 塊作用域

檢查所有按鈕也不起作用。

您的意見將不勝感激。

<html>
 <head>
  <title>Get Checkbox Value</title>
  <style type="text/css">
      body {
          padding-top: 10px;
          font-family: Verdana, Geneva, Tahoma, sans-serif;
          background-color: #ede5e5;
          height: 100vh;
      }
      div { 
          width: 50%;
          margin: auto;
          border: 1px solid lightgray;
          border-radius: 5px;
          -webkit-box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
          box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
          padding: 10px;
          padding-left: 20px;
          padding-bottom: 30px;
          background-color: white;
      }
      button {
          padding:5px;
          font-size: 16px;
          font-weight: bold;
      }
      label {
          font-size: 18px;
          font-weight: bold;
      }
      input [type=checkbox] {
          width: 20px;
          height: 20px;
      }

  </style>

 </head>
<body>
    <div style="">
      <h2>Select a Programming Language You Love</h2>
      <form id="frm-lang">
          
          <input type="checkbox" name="languages" value="JavaScript">
          <label>JavaScript</label><br/>

          <input type="checkbox" name="languages" value="PHP">
          <label>PHP</label><br/>

          <input type="checkbox" name="languages" value="Pyton">
          <label>Pyton</label><br/>

          <input type="checkbox" name="languages" value="C#">
          <label>C#</label><br/>

          <input type="checkbox" name="languages" value="C  ">
          <label>C  </label><br/><br/>

          <button id="btnSubmit">Submit</button>
          <button id="btnCheckAll">Check All</button>


      </form>


    </div>
     <script>
         let formvar = document.getElementById('frm-lang');  
         let valuesvar = [];

         formvar.addEventListener('submit', function(e) {   
          e.preventDefault ();
          let checkboxesvar = document.getElementsByName('languages');
          for (let i = 0; i < checkboxesvar.length; i  ) {  
              if (checkboxesvar[i].checked == true) {  
              
                  valuesvar.push(checkboxesvar[i].value);  
              }   
          }

           alert('The values(s): '   valuesvar.toString());
         });   

         // for the check all button

         document.getElementById('btnCheckAll').onclick = function(e) {
             e.preventDefault();
             let checkboxesvar = document.getElementsByName('languages');
             for (let i=0; i < checkboxesvar.length; i  ) {
                 checkbboxesvar[i].checked = true;
             }
         }


            
     </script>

</body>
</html>

uj5u.com熱心網友回復：

你拼錯了 checkboxesvar 你的變數是 checkboxesvar

uj5u.com熱心網友回復：

在您的submit偵聽器中，您沒有清除您的陣列，因此它將保留上一次提交的值，您需要清除它，因此將其移至偵聽器內部

在你的checkAll你有一個錯字，checbboxesvar有 2b

我稍微改進了您的代碼，重命名了變數名并留下了一行解決方案。

const form = document.getElementById('frm-lang');
const checkboxes = document.getElementsByName('languages');
const checkAll = document.getElementById('btnCheckAll');

form.addEventListener('submit', e => {
  e.preventDefault();
  let values = [];
  // for loop solution
  
  //for (let i = 0; i < checkboxes.length; i  ) {
  //  if (checkboxes[i].checked) {
  //    values.push(checkboxes[i].value);
  //  }
  //}
  
  //one liner solution
  checkboxes.forEach(el => el.checked &&  values.push(el.value))
 
 console.log('The values(s): '   values);
});

// for the check all button

checkAll.addEventListener('click', e => {
  e.preventDefault();
  // for loop solution

  //for (let i = 0; i < checkboxes.length; i  ) {
  //  checkboxes[i].checked = true;
  //}

  //one liner solution
  checkboxes.forEach(el => el.checked = true)
})

body {
  padding-top: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: #ede5e5;
  height: 100vh;
}

.container {
  width: 50%;
  margin: auto;
  border: 1px solid lightgray;
  border-radius: 5px;
  box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
  padding: 10px 10px 30px 20px;
  background-color: white;
}

button {
  padding: 5px;
  font-size: 16px;
  font-weight: bold;
}

label {
  font-size: 18px;
  font-weight: bold;
}

input[type=checkbox] {
  width: 20px;
  height: 20px;
}

<div class="container">
  <h2>Select a Programming Language You Love</h2>
  <form id="frm-lang">

    <input type="checkbox" name="languages" value="JavaScript">
    <label>JavaScript</label><br/>

    <input type="checkbox" name="languages" value="PHP">
    <label>PHP</label><br/>

    <input type="checkbox" name="languages" value="Pyton">
    <label>Pyton</label><br/>

    <input type="checkbox" name="languages" value="C#">
    <label>C#</label><br/>

    <input type="checkbox" name="languages" value="C  ">
    <label>C  </label><br/><br/>

    <button id="btnSubmit">Submit</button>
    <button id="btnCheckAll">Check All</button>
  </form>
</div>

uj5u.com熱心網友回復：

<button>默認情況下，嵌套在 a<form>中的任何內容type="submit"，因此添加到“檢查全部”按鈕，如果它觸發提交事件，則type="button"不需要任何內容??。<button>

該示例使用HTMLFormElement和 HTMLFormControlsCollection介面來參考所有表單控制元件。此外，“全選”按鈕可切換選中/未選中的所有復選框。

細節在例子中注釋

.as-console-row::after { width: 0; font-size: 0; }
.as-console-row-code { width: 100%; word-break: break-word; }
.as-console-wrapper { max-height: 60% !important; max-width: 25%; }

<html>

<head>
  <title>Get Checkbox Value</title>
  <style>
    html {
      font: 900 2.5ch/1.2 Veranda;
    }

    body {
      padding-top: 10px;
      height: 100vh;
    }
    
    fieldset {
      width: 50%;
      margin: auto;
      border: 1px solid lightgray;
      border-radius: 5px;
      box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
      padding: 10px;
      padding-left: 20px;
      padding-bottom: 30px;
      background-color: white;
    }
    
    menu {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin: 0;
      list-style: none;
    }
    
    button {
      padding: 3px 5px;
      font: inherit;
      cursor: pointer;
    }
    
    input [type=checkbox] {
      width: 20px;
      height: 20px;
    }
  </style>

</head>

<body>
  <form id="lang">
    <fieldset>
      <legend>
        <h2>Favorite Language</h2>
      </legend>

      <input type="checkbox" name="languages" value="JavaScript">
      <label>JavaScript</label><br/>

      <input type="checkbox" name="languages" value="PHP">
      <label>PHP</label><br/>

      <input type="checkbox" name="languages" value="Python">
      <label>Python</label><br/>

      <input type="checkbox" name="languages" value="C#">
      <label>C#</label><br/>

      <input type="checkbox" name="languages" value="C  ">
      <label>C  </label><br/><br/>
      
      <menu>
        <button>Submit</button>
        <button id="all" type='button'>Check All</button>
      </menu>
    </fieldset>
  </form>
  <script>
    // Reference the form
    const form = document.forms.lang;
    // Reference all inputs, buttons, and fieldsets
    const IO = form.elements;
    // Collect all [name='languages'] into an array
    const chx = [...IO.languages];
    
    /*
    Bind an event handler to the submit event
    When <form> is submitted instead of the default behavior
    the values of all checkboxes will be collected into an array
    then logged on console
    */
    let values;
    
    form.onsubmit = collectValues;
    
    function collectValues(e) {
      e.preventDefault();
      values = chx.map(c => c.value);
      console.log(values);
    }
    /*
    Bind button#all to the click event
    Invoke toggleCB(e) when clicked
    */
    IO.all.onclick = toggleCB;
    
    function toggleCB(e) {
      // Toggle the ".check" class on button
      this.classList.toggle('check');
      /*
      If the button has ".check" class...
      ...check all checkboxes...
      ...otherwise uncheck all checkboxes
      */
      if (this.classList.contains('check')) {
        chx.forEach(c => c.checked = true);
      } else {
        chx.forEach(c => c.checked = false);
      }
    }
        
  </script>

</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/492943.html

標籤：javascript 数组 for循环

上一篇：ReactforEach函式不呈現HTML

下一篇：為什么輸入值不會更新？當我點擊發送按鈕時？