javascript - 入力タグを取得して未チェックに設定する

Question

タイプが「チェックボックス」の入力タグを td から取得し、それらを未チェックとしてマークする Java スクリプト関数を作成したいと考えています。以下は jsp コードです。

<td id="uncheckedByDefault" align=center class=listTypeOne>
    <% if (priv.getViewPrivilege() == 1) { %>
    <input name="view" type="checkbox" value='<%= priv.getAttributeId() %>' checked>                     
    <% } else { %>
    <input name="view" type="checkbox" value='<%= priv.getAttributeId()%>'>
    <% } %>
</td>

ここで、td には id="uncheckedByDefault" があります。すべての入力タグを取得し、チェックを外したいと考えています。どうすればそれができるか誰にもわかりますか。前もって感謝します。

score 2 · Accepted Answer

試す：

inputs = document.getElementById('uncheckedByDefault').getElementsByTagName('input');

    for (index = 0; index < inputs.length; ++index) {
        // deal with inputs[index] element.
       inputs[index].checked=false;
    }

score 1 · Accepted Answer

あなたの問題を理解できたかどうかわかりませんが、試してみます。

まず第一に、要素を Web ページに印刷できるので<% ... %>(私の回答でその方法を示します)、条件をに設定したり<% ... %>、要素を印刷したりする必要はありません。すべて同じ Java 関数です。 .

Object次に、ゲッターを呼び出さずにプロパティにアクセスできます。彼の値を特定のフィールドに設定する場合は、まったく必要ありません。(すなわち)<input type="text" name="clientName" value="${client.clientName}" />

これがあなたの質問に対する私の提案です：

<td id="uncheckedByDefault" align=center class=listTypeOne>
    <%
        if (priv.getViewPrivilege() == 1) {
            out.println("<input name='view' type='checkbox' + 
            value=" + priv.getAttributeId() + " checked = 'checked'>");
        } else {
            out.println("<input name='view' type='checkbox' + 
            value=" + priv.getAttributeId() + ">");
        }
    %>
</td>

うまくいったか、それともあなたが望んでいたものではないかを報告してください。

アップデート

あなたの要素id属性がそれを示唆しているため、それらをすべてオフにしたい場合。オブジェクトのプロパティをチェックして設定するかどうかを確認する必要があるのはなぜcheckedですか? 要素を追加するだけで、checked プロパティを設定しないでください。

<input name='view' type='checkbox' value="${priv.attributeId}">

score 1 · Accepted Answer

必要な関数は次のとおりです。いつでも呼び出すことができます。

function uncheckAll(){
    var inputsContainer = document.getElementById('uncheckedByDefault');
    var allInputs = inputsContainer.getElementsByTagName('input');
    var len = allInputs.length;
    for(var i=0; i<len; i++){
         if(allInputs[i].type == 'checkbox'){
         allInputs[i].checked = false;
         }
    }
}

score 0 · Accepted Answer

関心のあるすべての要素のリストを取得するだけで、それらに対して何らかのアクションを実行する必要があります。querySelectorAll 関数は実際には配列を返さないため、forEachNode 関数を追加しました。配列と同様の構文と機能を持つ nodeList を返しますが、forEach 関数は省略されています。

注: 属性がチェックされている場合、チェックボックスがチェックされます。属性の実際の値は使用されません。チェック状態を決定するのは、属性の存在または欠如だけです。そのため、checked 属性には 0 以外の値を書き込むことができます。

編集：上記のメモは正しくありません。html に表示される「checked」属性と「checked」メンバー変数の両方が状態を制御します。チェック解除機能とチェック機能を更新しました。

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}

window.addEventListener('load', mInit, false);

function mInit()
{
}

/*
     func to be called takes 3 variables. currentElement, currentIndex, nodeList the element belongs to.
*/
function forEachNode(nodeList, func)
{
    var i, n = nodeList.length;
    for (i=0; i<n; i++)
    {
        func(nodeList[i], i, nodeList);
    }
}
/*
function uncheck(elem)
{
    elem.removeAttribute('checked');
}

function check(elem)
{
    elem.setAttribute('checked',0);
}
*/

function uncheck(elem)
{
    elem.checked = false;
    elem.removeAttribute('checked');
}

function check(elem)
{
    elem.checked = true;
    elem.setAttribute('checked',0);
}



function checkAll()
{
    var checkBoxElements = document.querySelectorAll('input[type=checkbox]');
    forEachNode(checkBoxElements, check);
}

function uncheckAll()
{
    var checkBoxElements = document.querySelectorAll('input[type=checkbox]');
    forEachNode(checkBoxElements, uncheck);
}

</script>
<style>
</style>
</head>
<body>
    <button onclick='uncheckAll()'>Uncheck all</button>
    <button onclick='checkAll()'>Check all</button>
    <br>
    <input type='checkbox'/>CB 1
    <br>
    <input type='checkbox'/>CB 2
    <br>
    <input type='checkbox'/>CB 3
    <br>
    <input type='checkbox'/>CB 4
    <br>
    <input type='checkbox'/>CB 5
    <br>
</body>
</html>

score 0 · Accepted Answer

これはうまくいくはずです

var allInputs = document.getElementById("uncheckedByDefault").getElementsByTagName("input");
for (i = 0; i < allInputs.length; i++) {
    if (allInputs[i].getAttribute("type") == 'checkbox') {
        allInputs[i].removeAttribute("checked");
    }
}

javascript - 入力タグを取得して未チェックに設定する

5 に答える 5

Related

Reference