#input type="checkbox"の状態をJSで取得したい
チェックボックス依存の選択削除など割と使う機会が多いと思うのでまとめます。
太字が私のおすすめです。
１．document.getElementById(id名).checkedで取得→1つだけ取得向き
２．document.getElementByClassName(class名)で取得→複数にも対応できる
３－１．document.(form名).(checkbox名).checkedで取得→フォームで区切られている手法。１つだけ取得向き
３－２．document.(form名).(checkbox名).checkedで取得→フォームで区切られている手法。名前を工夫してつけて配列化
３－３．document.(form名).(checkbox名).checkedで取得（@cfm-artさんより）→３－２の問題点を解決
４．document.(form名).elementsで取得→不具合でそう
５．document.querySelectorAll(セレクタ名)で取得（@cfm-artさんより）→セレクタ名の知識が必要だが、とても良い
##１．document.getElementById(id名).checkedで取得
いつものやり方といった感じ。
<form class="form1" name="form1">
<input type="button" onclick="func()" />
<input type="checkbox" id="ch1" />
</form>
var func = function () {
var s = document.getElementById("ch1").checked;
//true,falseで取得できます
}
checkboxどうやって取得しますか？と聞かれたら一番にやりそうな手法です。
idは一意なので、複数への対応はできません。
##２．document.getElementByClassName(class名)で取得
classでとれば配列として取得できることを利用した取得方法です。
これなら複数にも対応できます。
<form class="form1" name="form1">
<input type="checkbox" class="ch1" />
<input type="checkbox" class="ch1" />
</form>
var func = function () {
var s = document.getElementsByClassName("ch1");
var n = s[0].checked;//true,falseで取得できます
var t = s[1].checked;//true,falseで取得できます
}
正直これだけ覚えておけばほかすべてに対応できます。class名をかぶせないようにだけ注意してください。
##３－１．document.(form名).(checkbox名).checkedで取得
素直に検索するとこれが一番初めにヒットしました。
特定のフォーム内にある、チェックボックスを取得する形
変な場所から取得してくることがないので、意外と良い気がします。
<form class="form1" name="form1">
<input type="button" onclick="func()" />
<input type="checkbox" name="ch1" />
</form>
var func = function () {
var ch = document.form1.ch1.checked;
//true,falseで取得できます
}
問題なく取得はできます。
デメリットは同じnameのものを量産しても配列として取得できません。
1つのチェックボックスを取得するのならこれでいいでしょう。
##３－２．document.(form名).(checkbox名).checkedで取得（応用編）
３－１の方法を工夫して配列っぽい名前のnameを大量に作り、複数取得を目指します。
<form class="form1" name="form1">
<input type="button" onclick="func()" />
<input type="checkbox" name="ch0" />
<input type="checkbox" name="ch1" />
</form>
var func = function () {
var u = [];
for (var i = 0; i < 2; i++) {
u.push(eval('document.form1.ch' + i + '.checked'));
//u[0]=true/false
//u[1]=true/false
//といった配列の形で取得できます
}
}
少し工夫をすることで取得ができます。
使用したのはevalです。
eval()は()内を式として再評価する関数です。
form1.ch0,form1.ch1など繰り返し処理することで配列として取得します。
ですが、evalは文字列を式として再評価する→悪意あるコードを入れ込むこともできるので、別の手法があれば用いるべきだと思います。
##３－３．document.(form名).(checkbox名).checkedで取得（@cfm-artさんより）
手法自体は３－２と全く同じですが、evalを使わないで済む方法を教えていただきました。
<form class="form1" name="form1">
<input type="button" onclick="func()" />
<input type="checkbox" name="ch0" />
<input type="checkbox" name="ch1" />
</form>
var func = function () {
var u = [];
for (var i = 0; i < 2; i++) {
u.push(document.form1['ch' + i].checked);
//u[0]=true/false
//u[1]=true/false
//といった配列の形で取得できます
}
}
工夫はそのままに、evalを使用せず同様のことができました。ありがとうございました。
##４．document.(form名).elementsで取得
こちらも検索でヒットした手法。
こちらも取得可能ですが不具合が出る含みがあります。
<form class="form1" name="form1">
<input type="button" onclick="func()" />
<input type="checkbox"/>
<input type="checkbox"/>
</form>
var func = function () {
var u = [];
for (var i = 0; i < 2; i++) {
u.push(document.form1.elements[i].checked);
//u[0]=true/false
//u[1]=true/false
//といった配列の形で取得できます
}
}
一応これでも取得はできます。
しかし、このelementsという取得法はform内のすべてのinputを取得します。
form内のinputが全てcheckboxなら活用できるでしょうが、含みがある分不具合の原因にもなりそうなので、あまりお勧めしません。
##５．document.querySelectorAll(セレクタ名)で取得（@cfm-artさんより）
コメントで教えていただいたものを調べたので、追記します。
<form class="form1" >
<input type="button" onclick="func()" />
<input type="checkbox" class="ch" />
<input type="checkbox" class="ch" />
</form>
var func = function () {
var u = document.querySelectorAll('.form1 .ch');
var ch1 = u[0].checked;
var ch2 = u[1].checked;
//u[0].checked=true/false
//u[1].checked=true/false
//といった配列の形で取得できます
}
}
実際に書いてみた印象は２．３．の良いところどりといった印象です。
querySelectorAllの後ろがセレクタ名なので、少し知識が余分に必要なのがデメリットかもしれません。
こちらなど参考にするとよいのかもしれません。またいろいろ試してみます。