javascript에서 동적으로 생성 된 체크 박스 배열에 체크 된 체크 박스가 표시되지 않았습니다.

다음 체크 된 체크 박스의 값을 표시하는 코드가 있습니다. 그러나 그것이 그 것처럼 작동하지 않는 것 같습니다.javascript에서 동적으로 생성 된 체크 박스 배열에 체크 된 체크 박스가 표시되지 않았습니다.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
<script type="text/javascript"> 

    function myFunction() { 
     var checkedvalue = ""; 
     var arrChecks = document.getElementById("blah"); 

     for (i = 0; i < arrChecks.length; i++) { 
      var attribute = arrChecks[i].getAttribute("blah") 
      if (attribute == elementName) { 
       // if the current state is checked, unchecked and vice-versa 
       if (arrChecks[i].checked) { 
        arrChecks[i].checked = false; 
       } else { 
        arrChecks[i].checked = true; 
        checkedvalue = checkedvalue + " " + arrChecks[i].toString(); 
       } 

      } else { 
       arrChecks[i].checked = false; 
      } 
     } 

     document.getElementById("demo").innerHTML = checkedvalue; 
    } 


    function makeCheckboxes(str) { 
     var a = document.getElementById("blah"); 
     var arr = str; 
     var returnStr = ""; 
     for (i = 0; i < arr.length; i++) { 
      returnStr += '<input type="checkbox" name="theCheckbox" value="' + arr[i] + '" />' + arr[i]; 
     } 
     a.innerHTML = returnStr; 
    } 

    window.onload = function() { 
     var arrt = ["test1", "test2", "apple", "samsung", "nokia"]; 

     makeCheckboxes(arrt); 
    }; 

</script> 
<style type="text/css"></style> 
</head> 
<body> 
    <table border="1"> 
     <tr> 
     <td id="blah"></td> 
     <td>checkboxes should appear left of here</td> 
     <button onclick="myFunction()">Click me</button> 
     <p id="demo"></p> 
     </tr> 
    </table> 
</body>

어떤 영혼이 나를 깨달을 수 있으면 감사하겠습니다.

출처

2012-11-09 Jack

을'경우 (arrChecks [I] .checked를) '블록), 의도적 인 것인가? –

@PhilH, 네, 코드는 ('if (arrChecks [i] .checked)') 코드 블록에서 선택을 뒤집을 의도입니다 – Jack

항상 getElementByID는 하나의 요소를 반환합니다. <td> 안에 <p> 요소를 포함하면 안됩니다.

아래 코드 블록을 사용하십시오. 이렇게하면 필요한 출력이 제공됩니다.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
<script type="text/javascript"> 

    function myFunction() { 
     debugger; 
     var checkedvalue = ""; 
     var arrChecks = document.getElementsByName("theCheckbox"); 

     for (i = 0; i < arrChecks.length; i++) 
     { 
      // if the current state is checked, unchecked and vice-versa 
      if (arrChecks[i].checked) { 
       arrChecks[i].checked = false; 
      } else { 
       arrChecks[i].checked = true; 
       checkedvalue = checkedvalue + " " + arrChecks[i].getAttribute('value'); 
      } 

     } 

     document.getElementById("demo").innerHTML = checkedvalue; 
    } 


    function makeCheckboxes(str) { 
     var a = document.getElementById("blah"); 
     var arr = str; 
     var returnStr = ""; 
     for (i = 0; i < arr.length; i++) { 
      returnStr += '<input type="checkbox" name="theCheckbox" value="' + arr[i] + '" />' + arr[i]; 
     } 
     a.innerHTML = returnStr; 
    } 

    window.onload = function() { 
     var arrt = ["test1", "test2", "apple", "samsung", "nokia"]; 

     makeCheckboxes(arrt); 
    }; 

</script> 
<style type="text/css"></style> 
</head> 
<body> 
    <table border="1"> 
     <tr> 
     <td id="blah"></td> 
     <td>checkboxes should appear left of here</td> 
     <button onclick="myFunction()">Click me</button> 
     </tr> 
    </table> 

     <p id="demo"></p> 
</body> 
</html>

출처

2012-11-09 09:52:22 Narendra

Working jsfiddle.

수정 :

이 getElementsByTagName 호출을 추가하여, 체크 박스의 배열로 arrChecks을 변경 :

document.getElementById("blah").getElementsByTagName('input');
가 getAttribute 라인 (들)을 제거 - 지금 당신이 가지고 실제 확인란, 필터링 필요 없음
checkedvalue 행에 .value 속성을 사용하도록 변경했습니다. 체크 박스 객체가 있기 때문입니다.

결과 myFunction 기능 : 내가 여기에 의도 된 기능의 걱정

function myFunction() { 
    var checkedvalue = ""; 
    var arrChecks = document.getElementById("blah").getElementsByTagName('input'); 

    for (i = 0; i < arrChecks.length; i++) { 
     if (arrChecks[i].checked) { 
      arrChecks[i].checked = false; 
     } else { 
      arrChecks[i].checked = true; 
      checkedvalue = checkedvalue + " " + arrChecks[i].value; 
     } 
    } 

    document.getElementById("demo").innerHTML = checkedvalue; 
}

; 모든 확인란을 선택 취소로 변경하고 그 반대의 경우도 마찬가지입니다. 따라서 옵션을 선택하고 버튼을 누르면 선택이 반전되고 새로 검사 된 (이전에 선택하지 않은) 옵션이 div에 나열됩니다.

다른 input 요소 (안 체크 박스)를 가질 수 있다면, 당신은 따라서 보호해야합니다 코드는 선택 (반전을 시도

function myFunction() { 
    var checkedvalue = ""; 
    var arrInputs = document.getElementById("blah").getElementsByTagName('input'); 

    for (i = 0; i < arrChecks.length; i++) { 
     if(arrInputs.type != 'checkbox') 
      continue; 

     var box = arrInputs[i]; 

     if (box.checked) { 
      box.checked = false; 
     } else { 
      box.checked = true; 
      checkedvalue = checkedvalue + " " + box.value; 
     } 
    } 

    document.getElementById("demo").innerHTML = checkedvalue; 
}

출처

2012-11-09 10:03:50

+1 jsfiddle을 제공하고 다른 것에 대해서도 언급함으로써 답을 더욱 잘 볼 수 있습니다. 내가 놓칠지도 모르는'input' 요소. – Jack

javascript에서 동적으로 생성 된 체크 박스 배열에 체크 된 체크 박스가 표시되지 않았습니다.

답변

관련 문제