名前でチェックボックスを選択し、javascriptにチェックが入っていることを確認します

Question

チェックボックスがオンになっているかどうかをテストしようとしています。 私はより多くの入力があり、それらは異なる名前を持っています。 入力を選択することができましたが、選択されているかどうかを確認できないようです。 '= true'という条件に追加すると、ページをロードするとチェックされます。私はそれをちょうどチェックしても何もしません。

1. 私は入力権を選択しましたか？ IDまたはクラスではなく名前で選択したいのですが、

2. if文が動作しないのはなぜですか？

---

<input type="checkbox" name="name1"> 
<input type="checkbox" name="name2"> 
<input type="checkbox" name="name3"> 
<input type="checkbox" name="name4"> 


const firstInput = document.getElementsByName('name1'); 
if (firstInput[0].checked) { 
    console.log('checked'); 
} 

Answer 1

は、名前 "1" を持つ要素を選択しているが、このような名前を持つ要素を持っている `tを。 name属性が「名前」で始まるすべての入力を選択する場合：

const firstInput = document.querySelectorAll('[name^=name]') 

Answer 2

をあなたはその入力に属性を追加する必要があります。 onclickのリスナーを取り付け、操作する

のgetAttribute のsetAttribute

が属性を '確認' を呼び出します。

<input type="checkbox" onclick="myFunction()" name="name1"> 
<input type="checkbox" onclick="myFunction()" name="name2"> 
<input type="checkbox" onclick="myFunction()" name="name3"> 
<input type="checkbox" onclick="myFunction()" name="name4"> 


function myFunction() { 
    var $element = document.getElementsByName('name1')[0]; 
    var checked = $element.getAttribute('checked') === 'true'; 
    $element.setAttribute('checked', !checked); 
    console.log($element.getAttribute('checked')); 
}