0

複数のチェック ボックス (下の html コードのような) がある場合、チェックすると 2 つのフィールドに同じデータが表示されます。したがって、簡単な例は、「追加のモニター」と「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';
}

このコードのままでは、奇数の項目をチェックすると「*必須」と表示され、偶数の項目を選択すると表示されません。

そこで、変数を「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 を使用しないでください。

4

1 に答える 1

2

あなたが達成しようとしていると思うことをデモするフィドルを作成しました。

私が理解しているように、すべてのチェックボックスをループして、それらのいずれかがチェックされているかどうかを判断したいと考えています。いずれかがオンになっている場合、両方のテキスト ボックスが必要です。

それぞれに対して実行するのではなく、両方の「必要な」メッセージの表示値を同時に設定する方が効率的です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;
}
于 2013-09-06T16:58:13.023 に答える