人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptで質問です。
「全てなしにチェック」ボタンで、職員マスタより得た
全職員分のチェックボックスにチェックをつけようとしています。

職員データが複数ある場合は正常に機能するのですが、
1件の場合にはチェックがつきません。
どう修正すればよいでしょうか。
以下は本質問用に簡易化したコードです。

function chBxOn(){
for(i=0; i<document.f.elements['nashi[]'].length; i++) {
document.f.elements['nashi[]'][i].checked = true;
}
}
$sql="SELECT * FROM m_syokuin ";
$mysql->query($sql);
while($row = $mysql->fetch()){
$syokuin_id=$row[syokuin_id];
$syokuin_name=$row[syokuin_name];
echo <<<EOT
<input type="checkbox" name="nashi[]" value=$syokuin_id>なし
<input type="checkbox" name="ari[]" value=$syokuin_id>あり
EOT;
}
<input type="button" value="全てなしにチェック" onclick="javascript:chBxOn();">

●質問者: kentaro_jpn
●カテゴリ:ウェブ制作
✍キーワード:echo elements JavaScript MySQL SELECT
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● Banias
●27ポイント

ご質問のコードはJavaScriptとPHPが混在していると考えてよろしいでしょうか?


下記のように変更してみてください。

function chBxOn(){
 for(i=0; i<document.f.elements['nashi'].length; i++) {
 document.f.elements['nashi'][i].checked = true;
 }
}
$sql="SELECT * FROM m_syokuin";
$mysql->query($sql);
$i = 0;
while($row = $mysql->fetch()){
 $syokuin_id=$row[syokuin_id];
 $syokuin_name=$row[syokuin_name];
 echo <<<EOT
<input type="checkbox" name="nashi[{$i}]" value=$syokuin_id>なし
<input type="checkbox" name="ari[{$i}]" value=$syokuin_id>あり
EOT;
 $i++;
}
<input type="button" value="全てなしにチェック" onclick="javascript:chBxOn();"> 

2 ● うぃんど
●27ポイント ベストアンサー

1つだけの場合は集合として扱われないのでlengthそのものが存在しないというのが原因です

対処例

function chBxOn(){
 if (document.f.elements['nashi[]'].length == null) {
 document.f.elements['nashi[]'].checked = true;
 } else {
 for(i=0; i<document.f.elements['nashi[]'].length; i++) {
 document.f.elements['nashi[]'][i].checked = true;
 }
 }
}

余談ですけど、

有り無しならチェックボックスよりもラジオボタンのほうが適しているのでは?

◎質問者からの返答

ありがとうございます。

実際は「あり」「なし」以外の選択肢もあるため、チェックボックスを使っています。

提示していただいた対処例そのまま使わせていただきます。


3 ● nattow
●26ポイント

要素が複数あるときは document.f.elements['nashi'] を要素の入った配列として扱えるので、質問文にあるコードでいいのですが、一つしかない場合は document.f.elements['nashi'] が要素そのものを指す(配列ではない)ので、document.f.elements['nashi[]'][i] のように添え字をつけたアクセスができなくなります。

配列かどうかをチェックして場合分けが必要です。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ