Многие флажки переключаются показать/скрыть

Question

Если у меня есть несколько флажков (например, ниже html-кода), которые, если флажок, показывают одни и те же данные в двух полях. Таким образом, простой пример - проверить «дополнительный монитор» и «visio» и показать «* Обязательный».

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> 

Javascript:

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

Так с этим кодом, как есть, когда вы проверить нечетное количество элементов "* Обязательно" отображается, но если вы выбираете четное количество элементов, которые не отображаются.

Так что я думал, что если вы установите переменную в «истину» и поместите ее в функцию 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'; 
} 

Я знаю, что это не работает, но я искал что-то похожее на это. Пожалуйста, не используйте jQuery, если его полностью невозможно использовать JavaScript.

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; 
}