많은 확인란이 표시/숨기기를 전환합니다.

Question

체크 표시가있는 여러 확인란 (예 : html 코드)을 사용하면 두 필드에 동일한 데이터가 표시됩니다. 그래서 간단한 예제는 "additional monitor"와 "visio"를 체크하고 "* Required"를 보여 주도록하는 것입니다.

html로 코드 :

<table> 
<tr> 
    <td class="newemp_dataGLCCother"> 
     <label for="gl_account">GL Acccount:</label> 
     <input name="gl_account" id="gl_account" type="text" maxlength="15" /> 
     <label id="requiredgla" style="display:none"><font size="2" color="red">* Required</font> 
     </label> 
    </td> 
</tr> 
<tr> 
    <td class="newemp_dataGLCCother"> 
     <label for="cost_center">Cost Center:</label> 
     <input id="" name="cost_center" id="cost_center" type="text" maxlength="15" /> 
     <label id="requiredcc" style="display:none"><font color="red">*<font size="2"> Required</font></font> 
     </label> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input type="checkbox" name="non_standard_software" value="Additional Monitor" id="additional_monitor" onclick="showReq('requiredgla'); showReq('requiredcc')" />Additional Monitor</td> 
</tr> 
<tr> 
    <td> 
     <input type="checkbox" name="non_standard_software" value="AutoCAD" id="autocad" onclick="showReq('requiredgla'); showReq('requiredcc')" />AutoCAD</td> 
</tr> 
<tr> 
    <td> 
     <input type="checkbox" name="non_standard_software" value="MapPoint" id="mappoint" onclick="showReq('requiredgla'); showReq('requiredcc')" />MapPoint</td> 
</tr> 
<tr> 
    <td> 
     <input type="checkbox" name="non_standard_software" value="Visio" id="visio" onclick="showReq('requiredgla'); showReq('requiredcc')" />Visio</td> 
</tr> 
<tr> 
    <td> 
     <input type="checkbox" name="non_standard_software" value="Project" id="project" onclick="showReq('requiredgla'); showReq('requiredcc')" />Project</td> 
</tr> 
<tr> 
    <td class="newemp_dataGLCCother"> 
     <input type="checkbox" name="non_standard_software" value="other" id="other" onclick="showReq('otherbox'); showReq('requiredgla'); showReq('requiredcc')" />Other: 
     <input name="other" id="otherbox" type="text" style="display:none;" /> 
    </td> 
</tr> 

자바 스크립트 :

이

function showReq(id) { 
var e = document.getElementById(id); 
if (e.style.display == 'block') 
    e.style.display = 'none'; 
else 
    e.style.display = 'block'; 
} 

그래서 당신은 "* 필수"항목의 홀수 번호를 확인 그대로이 코드로 표시되어 있지만 경우 표시되지 않은 짝수 개의 항목을 선택합니다.

그래서 변수를 "true"로 설정하고 js 함수에 여러 항목을 선택하면 토글을 제거 할 것이라고 생각했습니다.

예 :

function showReq(id) { 
var dbl = true; 
var e = document.getElementById(id); 
if (e.style.display == 'block' && dbl === true) 
    e.style.display = 'none'; 
dbl = false; 
else 
    dbl = true; 
    e.style.display = 'block'; 
} 

나는이 작동하지 않는다는 것을 알고 있지만 나는이 비슷한 찾고 있어요. JavaScript를 완전히 사용할 수 없다면 jQuery를 사용하지 마십시오.

Answer 1

나는 당신이 달성하려고 시도하고 있다고 생각하는 것을 a fiddle을 통해 만들었습니다.

내가 알고 있듯이, 모든 체크 박스를 반복하여 점검 할 것인지 결정합니다. 둘 중 하나라도 선택되어 있으면 두 텍스트 상자가 모두 필요합니다.

showReq 대신 "필수"두 메시지의 표시 값을 동시에 설정하는 것이 더 효율적입니다.

내가 추가 한 방법은 showReq 내에서 호출되어 확인란을 선택했는지 확인하는 것입니다.

function checkboxesChecked() { 
    //get all the checkboxes 
    var checkboxes = document.getElementsByName('non_standard_software'); 
    //loop through checkboxes, if any are checked, return true 
    for (var i = 0; i < checkboxes.length; i++) 
     if (checkboxes[i].checked) return true; 
    return false; 
}