【あ】、【い】という項目があり、それぞれの項目内にA、Bというチェック項目があります。
【あ】項目のAにチェックを入れると【い】のAにもチェックが入るように作りました。
以下のソースでもなんとか動くのですが、【あ】、【い】という項目が増える事とA、Bというチェック項目が増えることが判り、JavaScriptのソースを少しでも短くしたいのですが、なにか好い方法がございましたらお教え頂ければ幸です。
/************参考ソースです*****************/
<html>
<head>
<title>無題ドキュメント</title>
<script>
function check_a(){
if(document.form.a.checked==true)
{
document.form.a.checked=true;
document.form.b.checked=false;
document.form.aa.checked=true;
document.form.bb.checked=false;
}
}
function check_b(){
if(document.form.b.checked==true)
{
document.form.a.checked=false;
document.form.b.checked=true;
document.form.aa.checked=false;
document.form.bb.checked=true;
}
}
function check_aa(){
if(document.form.aa.checked==true)
{
document.form.a.checked=true;
document.form.b.checked=false;
document.form.aa.checked=true;
document.form.bb.checked=false;
}
}
function check_bb(){
if(document.form.bb.checked==true)
{
document.form.a.checked=false;
document.form.b.checked=true;
document.form.aa.checked=false;
document.form.bb.checked=true;
}
}
</script>
</head>
<body>
<form name="form">
項目【あ】
<input type="checkbox" name="a" onclick="check_a()"> A<BR>
<input type="checkbox" name="b" onclick="check_b()"> B<BR>
<br />
項目【い】
<input type="checkbox" name="aa" onclick="check_aa()"> A<BR>
<input type="checkbox" name="bb" onclick="check_bb()"> B<BR>
<br />
</form>
</body>
</html>
/*************************/
何卒、宜しくお願い申上げます。m(_ _)m
No.1ベストアンサー
- 回答日時:
たとえばクラスを設定してグルーピングをするとか・・・
それとformにformという名前を付けるのはいろいろあってNG。
こんな感じでどうでしょ?
<script>
function check(obj){
var f=obj.form;
var cn=obj.className;
for(var i=0;i<f.length;i++){
if(f[i]==obj) continue;
if(f[i].type=="checkbox") f[i].checked=(cn==f[i].className);
}
}
</script>
<form>
項目【あ】<br />
<input type="checkbox" name="a" onclick="check(this)" class="a"> A<BR>
<input type="checkbox" name="b" onclick="check(this)" class="b"> B<BR>
<br />
項目【い】<br />
<input type="checkbox" name="aa" onclick="check(this)" class="a"> A<BR>
<input type="checkbox" name="bb" onclick="check(this)" class="b"> B<BR>
<br />
</form>
yambejp様へ
早々にご回答頂き感謝です!
スタイルシートのclassタグでチェックさせるなんて素晴らしいアイデアで
自分には一生考えつかない方法だと思います。
>それとformにformという名前を付けるのはいろいろあってNG。
今まで、ご指摘頂くまで普通にそのように名前付けていました。
これから過去に作ったものも変更していきたいと思います。
また、お教え頂いた方法でうまくいきました!
ソースまで作って頂き親切に教えて頂き本当にありがとうございました。m(_ _)m
自分もyambejp様みたいに、誰かに教えてあげられるように頑張りたいと思います。
No.2
- 回答日時:
classNameで指定すると ブラウザによって認識しなくなります。
<html>
<head>
<title>無題ドキュメント</title>
<script>
function grpCheck(myId){
if(document.getElementById){
frmObj = document.getElementById("Form1");
inpObj = frmObj.document.getElementById(myId);
inpTags = frmObj.getElementsByTagName("input");
if(inpObj.checked){
for(var i = 0; i < inpTags.length; i++){
if(inpTags(i).id.charAt(0) == myId.charAt(0)){
inpTags(i).checked = true;
}
}
}
}
}
</script>
</head>
<body>
<form id="Form1">
項目【あ
<input type="checkbox" id="A-a" onclick="grpCheck(this.id)"> A<br />
<input type="checkbox" id="B-a" onclick="grpCheck(this.id)"> B<br />
<br />項目【い
<input type="checkbox" id="A-b" onclick="grpCheck(this.id)"> A<br />
<input type="checkbox" id="B-b" onclick="grpCheck(this.id)"> B<br />
<br />
</form>
</body>
</html>
こんな感じでグループ分けしたらどうでしょう。
Chiquilin様へ
ソースまで示して頂き大変丁寧にご回答頂き感謝です。
ありがとうございました!m(_ _)m
>classNameで指定すると ブラウザによって認識しなくなります。
そうだったのですか、知りませんでした。貴重な情報感謝です。
yambejp様が示してくださったソースでIE6,IE7、Firefoxなどで正常に機能して
おりますので、今回の所はyambejp様の方法で作ってみたいと考えています。
他のブラウザで不具合があればChiquilin様のソースを参考にさせていただきます。
Chiquilin様やyambejp様のような方が居てくれることになんだか感動しています。 インターネットで自分も人助けできるようにがんばりたいです!
本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP PHPのエラーの解消法について教えて下さい。 1 2023/02/06 10:48
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- MySQL php テーブルを作れない 2 2022/11/17 18:22
- PHP php テーブルが作成できない 1 2022/11/17 23:41
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Nameは配列で、チェックされた...
-
チェックボックスが1つ以上チェ...
-
チェックボックスの値を取り出...
-
背景色を変えて未入力チェック...
-
チェックボックスのON/OFFに応...
-
チェックボックスのON/OFFでVal...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
javascriptでhiddenに二次元配...
-
formのfileの値をhiddenでも持...
-
javascriptでクイズ
-
【UWSC】HTML内のある部分を抽...
-
javascriptでセレクトボックス...
-
特定<table>内の<td>の色を変える
-
追加ボタンを押した際に ok ボ...
-
innerHTML内では改行は禁止?
-
submitした値を返したい
-
ファイル選択ダイアログが表示...
-
JavaScriptde途中で、「exit」...
-
1つのform内に2つのsubmitボタ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jsp/Java】チェックボックス...
-
チェックボックスのON/OFFでVal...
-
複数のチェックボックス項目が...
-
checkboxをクリックしてリロー...
-
背景色を変えて未入力チェック...
-
チェックボックスの設定
-
チェックボックスのON/OFFに応...
-
EclipseでSpringを使用し、テー...
-
JSP内で可変するチェックボック...
-
オフになっているチェックボッ...
-
複数あるチェックボックスから...
-
チェックボックスが複数ある場...
-
チェックボックスに全てチェッ...
-
確認ページからフォームページ...
-
特定のID(またはクラス)で括ら...
-
チェックボックス
-
ラジオボタンとチェックボック...
-
チェックボックスで指定したも...
-
チェックボックスを使って条件検索
-
配列のチェックボックスをjavas...
おすすめ情報