Javascript가 선택된 확인란을 무시하는 이유는 무엇입니까?

Question

내 페이지 하단에 여러 개의 datepickers, dropdownlists 시간과 요일이 포함 된 스크립트가 있습니다. 나는 루프를 사용하여 선택된 것들의 가치를 확인하고 싶다. 문제는 코드가로드 될 때 검사 된 선택된 요소의 초기 번호에 대해서만 반복된다는 것입니다. 처음 선택한 요소들에 대해서만 변경 사항을 감지합니다. 새로 선택한 항목은 무시됩니다. 또한 스크립트를 페이지 상단에 놓으면 변경 사항이 전혀 무시됩니다.

저는이 코드의 다른 버전을 약 1 주일 간 사용해 왔습니다. 누군가 내 문제가 될지도 모르는 부분에 도움을 줄 수 있습니까? 도와 줘서 고맙다.

<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 배열에 name 속성이 "selectedCourses"와 동일한 선택란 만 포함되도록 배열이 제한됩니다.