web-dev-qa-db-ja.com

純粋なJavaScriptでチェックボックスをオフにする方法は？

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

<div class="text">
   <input value="true" type="checkbox" checked="" name="copyNewAddrToBilling"><label>

値をfalseに変更したい。または、チェックボックスをオフにします。外部ライブラリ（jQueryなどは使用しない）を使用せずに、純粋なJavaScriptでこれを行いたい

javascripthtmlcheckbox
38
De Vonte
<html>
    <body>
        <input id="check1" type="checkbox" checked="" name="copyNewAddrToBilling">
    </body>
    <script language="javascript">
        document.getElementById("check1").checked = true;
        document.getElementById("check1").checked = false;
    </script>
</html>

スクリプト要素に言語属性を追加しましたが、すべてのブラウザーがこれをデフォルトとして使用するため、これは不要ですが、この例が何を示しているかは間違いありません。

JavaScriptを使用して要素にアクセスする場合、GetElement *関数の非常に限られたセットがあります。したがって、すべての要素に一意のid属性を与える習慣を身に付ける必要があります。

64
Strings

jQueryなしで推奨：

<input>にIDを与え、それを参照します。また、チェックボックスをチェックなしで開始する場合は、checked=""タグの<input>部分を削除します。それは次のとおりです。

document.getElementById("my-checkbox").checked = true;

純粋なJavaScript、要素IDなし（＃1）：

var inputs = document.getElementsByTagName('input');

for(var i = 0; i<inputs.length; i++){

  if(typeof inputs[i].getAttribute === 'function' && inputs[i].getAttribute('name') === 'copyNewAddrToBilling'){

    inputs[i].checked = true;

    break;

  }
}

純粋なJavascript、要素IDなし（＃2）：

document.querySelectorAll('.text input[name="copyNewAddrToBilling"]')[0].checked = true;

document.querySelector('.text input[name="copyNewAddrToBilling"]').checked = true;

querySelectorAll および querySelector メソッドは、IE8 +、Chrome 4 +、Safari 3.1 +、Firefox 3.5+およびすべてのモバイルブラウザーでサポートされています。 。

要素が欠落している可能性がある場合は、その存在をテストする必要があります。例：

var input = document.querySelector('.text input[name="copyNewAddrToBilling"]');
if (!input) { return; }

jQueryの場合：

$('.text input[name="copyNewAddrToBilling"]').prop('checked', true);
10
shennan

これを行う別の方法があります。

//elem - get the checkbox element and then
elem.setAttribute('checked', 'checked'); //check
elem.removeAttribute('checked'); //uncheck
5
Yang You

チェックボックスにIDを割り当てる必要があります。

<input id="checkboxId" type="checkbox" checked="" name="copyNewAddrToBilling">

そしてJavaScriptで：

document.getElementById("checkboxId").checked = false;
0
Oli_G