javascript - チェックボックスをオフにする-Javascript

Question

すべてのチェックボックスを一度にオフにする方法はありますか？

チェックボックスの4x4テーブルがあり、すべてのIDを「cb」に設定しています。それらをすべてクリアするボタンが欲しいので、次のようなことを試してみました。

document.getElementById("cb").checked="false"

しかし、画面上では、それらはまだチェックされたままです。これは可能ですか？

Answer 1

IDは一意であるため、同じIDを持つ複数の要素を使用しても問題は解決せず、マークアップが無効になるだけです。代わりにクラスを使用してください：

var boxes = document.getElementsByClassName("cb");

for (i=0; boxes.length<i; i++) {
    boxes[i].checked = false;
}

Answer 2

この記事をチェックするJavascriptすべてのチェックボックスをオンまたはオフにします

以下のコードは次のとおりです。

脚本

<script language="JavaScript">

    function checkAll(field)
    {
    for (i = 0; i < field.length; i++)
        field[i].checked = true ;
    }

    function uncheckAll(field)
    {
    for (i = 0; i < field.length; i++)
        field[i].checked = false ;
    }

</script>

HTML

<form name="myform" action="checkboxes.asp" method="post">
<b>Your Favorite Scripts & Languages</b><br>
<input type="checkbox" name="list" value="1">Java<br>
<input type="checkbox" name="list" value="2">Javascript<br>
<input type="checkbox" name="list" value="3">Active Server Pages<br>
<input type="checkbox" name="list" value="4">HTML<br>
<input type="checkbox" name="list" value="5">SQL<br>

<input type="button" name="CheckAll" value="Check All"
onClick="checkAll(document.myform.list)">
<input type="button" name="UnCheckAll" value="Uncheck All"
onClick="uncheckAll(document.myform.list)">
<br>
</form>

よろしくお願いします

Answer 3

次のようなものを使用できます。

function toggle(state) {
    var cb = document.getElementsByName('cb');
    for (var i = cb.length; i--;) {
        cb[i].checked = typeof state != 'undefined' ? state : !cb[i].checked;
    }
}

使用法：

toggle(false); // Uncheck all
toggle(true);  // Check all
toggle();      // Toggle all

この例では、name属性でチェックボックスを選択します。また、クラス名を使用して、document.getElementsByClassNameまたはdocument.querySelectorAllメソッドを使用して入力を選択することもできます。

デモ： http： //jsfiddle.net/kCmqL/1/

Answer 4

試す

<script language="javascript">
function checkUnCheckAll(formname)
{
  var checkboxes = new Array(); 
  checkboxes = document[formname].getElementsByTagName('input');

  for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
      checkboxes[i].checked = false;
    }
  }
}
</script>

More

Answer 5

以下のように、すべてのコントロールに同じ名前を付けることもできます。

<input type="Checkbox" name="compare" id="compare" value="1" />
    <input type="Checkbox" name="compare" id="Checkbox1" value="5" />
    <input type="Checkbox" name="compare" id="Checkbox2" value="8" />
    <input type="Checkbox" name="compare" id="Checkbox3" value="10" />

<input type="button" value="select all" onclick="javascript:checkAll()"/>
<input type="button" value="unckeck all" onclick="javascript: unCheckAll()"/> 

<script type="text/javascript">
    function checkAll()
    {
        var c = document.getElementsByName("compare");
        for (var i = 0; i < c.length; i++) {
            c[i].checked = true;
        }

    }
    function unCheckAll() {
        var c = document.getElementsByName("compare");
        for (var i = 0; i < c.length; i++) {
            c[i].checked = false;
        }

    }
    </script>

Answer 6

すでに回答はありますが、オプションとして以下も掲載したいと思いました。次の最小限の/実証的なHTMLマークアップが与えられます。

<input type="checkbox" class="something" name="cb" />
<input type="checkbox" class="something" name="cb" checked />
<input type="checkbox" class="something" name="cb" />
<input type="checkbox" class="something" name="cb" />
<input type="checkbox" class="something" name="cb" checked />
<input type="checkbox" class="something" name="cb" checked />

checkboxes次のJavaScriptを使用して、セレクターから返されるすべてをチェック、チェック解除、または切り替えることができます。

Object.prototype.check = function (newState) {
    switch (newState.toLowerCase()) {
        case 'toggle':
            for (var i = 0, len = this.length; i<len; i++){
                this[i].checked = !this[i].checked;
            }
            break;
        case 'check':
            for (var i = 0, len = this.length; i < len; i++) {
                this[i].checked = true;
            }
            break;
        case 'uncheck':
            for (var i = 0, len = this.length; i < len; i++) {
                this[i].checked = false;
            }
            break;
    }
    return this;
};

すべてを切り替えるには、（たとえば）で呼び出します。

document.getElementsByClassName('something').check('toggle');。

すべてを確認するには、（たとえば）で呼び出します。

document.getElementsByClassName('something').check('check');。

すべてのチェックを外すには、（たとえば）で呼び出します。

document.getElementsByClassName('something').check('uncheck');。