爲什麼我的Javascript忽略選中的複選框？

Question

我在頁面底部有一個腳本，其中包含多個datepickers,dropdownlists時間和天數。我想使用循環來檢查選定值的值。問題在於代碼僅循環加載頁面時檢查的所選元素的初始數量。它只會檢測到這些最初選定元素的變化。它會忽略任何新選擇的項目。另外，當我將腳本放在頁面頂部時，它完全忽略了任何更改。

我一直在嘗試不同版本的這段代碼約一週。有人可以幫助我發現可能是我的問題嗎？感謝您的幫助。

<script type="text/javascript"> 
    $(function() { 

     $("#date").datepicker(); 
     $('input[name=date]').datepicker(); 
     var dateInput = $("select[name='searchString']"); 

     var checkedindex = []; 
     var classdate = []; 
     var classtime = []; 
     var dayofclass = []; 
     var newDateAndTime = []; 
     var oldDateAndTime = []; 

     $("input[name='selectedCourses']").each(function (i) { 
      if (this.checked) { 
       checkedindex.push(parseInt(i)); 
      } 
     }); 

     for (var x = 0; x < checkedindex.length; x++) { 
      var ind = checkedindex[x]; 

      var dateofclass = $(".TextBoxDate:eq(" + ind + ")"); 
      var timeofclass = $(".TextBoxTime:eq(" + ind + ")"); 
      var classday = $("select[name='searchString']:eq(" + ind + ")"); 

      classdate.push(dateofclass); 
      classtime.push(timeofclass); 
      dayofclass.push(classday); 

      oldDateAndTime = (dayofclass[x].val() + classtime[x].val()).toString(); 
     } 

     $("#saveBtn").click(function() { 

      for (var x = 0; x < checkedindex.length; x++) { 
       var ind = checkedindex[x]; 

       var dateofclass = $(".TextBoxDate:eq(" + ind + ")"); 
       var timeofclass = $(".TextBoxTime:eq(" + ind + ")"); 
       var classday = $("select[name='searchString']:eq(" + ind + ")"); 

       classdate.push(dateofclass); 
       classtime.push(timeofclass); 
       dayofclass.push(classday); 

       var testString = (dayofclass[x].val() + classtime[x].val()).toString(); 

       alert(testString + " " + oldDateAndTime); 

       oldDateAndTime = (dayofclass[x].val() + classtime[x].val()).toString(); 
      } 

      return false; 
     }); 
    }); 
</script> 

Answer 1

點擊保存按鈕後，您應該填寫checkedindex數組，否則它只包含頁面加載時選擇的元素。嘗試下面的腳本。

<script type="text/javascript"> 
    $(function() { 

     $("#date").datepicker(); 
     $('input[name=date]').datepicker(); 
     var dateInput = $("select[name='searchString']"); 

     $("#saveBtn").click(function() { 

      var checkedindex = []; 
      var classdate = []; 
      var classtime = []; 
      var dayofclass = []; 
      var newDateAndTime = []; 
      var oldDateAndTime = []; 

      $("input[name='selectedCourses']").each(function (i) { 
       if (this.checked) { 
        checkedindex.push(parseInt(i)); 
       } 
      }); 

      for (var x = 0; x < checkedindex.length; x++) { 
       var ind = checkedindex[x]; 

       var dateofclass = $(".TextBoxDate:eq(" + ind + ")"); 
       var timeofclass = $(".TextBoxTime:eq(" + ind + ")"); 
       var classday = $("select[name='searchString']:eq(" + ind + ")"); 

       classdate.push(dateofclass); 
       classtime.push(timeofclass); 
       dayofclass.push(classday); 

       var testString = (dayofclass[x].val() + classtime[x].val()).toString(); 

       alert(testString + " " + oldDateAndTime); 

       oldDateAndTime = (dayofclass[x].val() + classtime[x].val()).toString(); 
      } 

      return false; 
     }); 
    }); 
</script> 

謝謝！

Answer 2

您只在腳本的開頭計算checkedindex一次。該數組僅在腳本運行時包含選中的複選框。

我假設你想迭代選中的複選框，每當#saveBtn元素被點擊？如果是這樣，您需要重新計算checkedindex陣列。

請注意您正在使用的選擇器，input[name='selectedCourses']。這限制了checkedindex數組僅包含名稱屬性等於「selectedCourses」的已選中複選框。