こんばんは。いつもお世話になっております。
随分前になりますが、こちらでご指導いただいた内容を元に、タイトルにある、グループ別けされたチェックボックス郡の選択および解除をしたいと考えているのですが、お恥ずかしながら、思うような結果を得る事が出来ません。
お忙しい中恐縮ですが、ご指導いただきたく投函させて頂きます。
※グループ単位で選択or解除をしたい
□カテゴリ(すべて選択or解除)
□1 □2 □3 □4 □5
□タイプ
□1 □2 □3 □4 □5
文字数制限に引っかかってしまったので、javascpipt部は非表示にいたします。
<input type="checkbox" onclick="CheckAlt(this)">
<div id="category">
<input type="checkbox" name="category[]" value="1">
<input type="checkbox" name="category[]" value="2">
<input type="checkbox" name="category[]" value="3">
<input type="checkbox" name="category[]" value="4">
<input type="checkbox" name="category[]" value="5">
</div>
<input type="checkbox" onclick="CheckAlt(this)">
<div id="type">
<input type="checkbox" name="type[]" value="1">
<input type="checkbox" name="type[]" value="2">
<input type="checkbox" name="type[]" value="3">
<input type="checkbox" name="type[]" value="4">
<input type="checkbox" name="type[]" value="5">
</div>
No.2ベストアンサー
- 回答日時:
<form>
<p><input type="checkbox" onclick="CheckAlt(this)"></p>
<div>
<input type="checkbox" name="category[]" value="1">
<input type="checkbox" name="category[]" value="2">
<input type="checkbox" name="category[]" value="3">
<input type="checkbox" name="category[]" value="4">
<input type="checkbox" name="category[]" value="5">
</div>
<p><input type="checkbox" onclick="CheckAlt(this)"></p>
<div>
<input type="checkbox" name="type[]" value="1">
<input type="checkbox" name="type[]" value="2">
<input type="checkbox" name="type[]" value="3">
<input type="checkbox" name="type[]" value="4">
<input type="checkbox" name="type[]" value="5">
</div>
</form>
面倒ですからこのようにHTMLを書いたら如何でしょうか
そうすると
Form = document.getElementsByTagName('form')[0]
P = Form.getElementsByTagName('p')
DIV = Form.getElementsByTagName('div')
for(i=0;i<P.length;i++){
Pinput = P[i].getElementsByTagName('input')[0]
DIVinput = DIV[i].getElementsByTagName('input')
if(Pinput.checked){for(k=0;k<DIVinput.length;k++){DIVinput[k].checked=true}}
else{for(k=0;k<DIVinput.length;k++){DIVinput[k].checked=false}}
}
こんな感じになるんでしょうかね。
Pは他のタグでも良いです。
早い話,フォーム内の要素を参照できれば良いですよね。
他にも
formsやelementsなどを使っても出きるとおもいます。
やり方は検索してください。
al785z29さま
はじめまして、こんばんは。
コードまで記述していただき、またポイントなど教えていただき有難う御座います!
で、早速試したところ、思い描いていた結果を返す事ができました!
言葉足らずなご挨拶ではありますが、ご親切な対応に感謝しております。有難う御座いました。
No.1
- 回答日時:
思うような結果とは?
Javascript部のソースと共に補足をお願いします。
steel_grayさま
はじめまして、こんばんは。早速のお返事を有難うございます。
お恥ずかしいながら、JavaScriptのソースは以下のようになっており、(これでも)考えながら試行錯誤を繰り返しているところです。
<SCRIPT language="JavaScript">
<!--
function CheckAlt(oAlt) {
var bCheck = oAlt.checked;
var oInputs = document.getElementById("category").getElementsByTagName("input");
for (var i = 0; i < oInputs.length; i++) {
if (oInputs[i].getAttribute("type") == "checkbox") {
oInputs[i].checked = bCheck;
}
}
var bCheck = oAlt.checked;
var oInputs = document.getElementById("type").getElementsByTagName("input");
for (var i = 0; i < oInputs.length; i++) {
if (oInputs[i].getAttribute("type") == "checkbox") {
oInputs[i].checked = bCheck;
}
}
}
//-->
</SCRIPT>
ちなみに、描いている結果とは、
□カテゴリ(すべて選択or解除)
□1 □2 □3 □4 □5
□タイプ
□1 □2 □3 □4 □5
の。一番最初のカテゴリをチェック(または解除)する事でその直下にある1~5までのチェック(または解除)を入れ、
3行目のタイプにチェックを入れることで、その下段にある1~5までのチェックを入れたいと考えています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- PHP $_SESSIONについて教えて下さい。 2 2023/03/02 09:18
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
一つのチェックボックスのON/OF...
-
メールフォームの未入力チェッ...
-
【UWSC】HTML内のある部分を抽...
-
3つのselectでURLパラメータを...
-
ボタン無しでフォーム内容送信
-
return trueとreturn falseの用...
-
正規表現で複数マッチ条件で悩...
-
クリックされた罫表セルの行番...
-
テキストエリアの行頭行末に指...
-
iframe内のformをサブミットす...
-
jQueryで特定のチェックボック...
-
onchangeイベントを強制的に発...
-
引数に数値、文字列の混在
-
jQueryで設定したイベントハン...
-
複数のプルダウンを1つにまとめ...
-
送信フォームで送信ボタンをお...
-
ボタン押下すると一行テキスト...
-
JavaScriptde途中で、「exit」...
-
perl で任意のフレーム内にペー...
-
javascriptの値をformのinput h...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jsp/Java】チェックボックス...
-
チェックボックスのON/OFFでVal...
-
checkboxをクリックしてリロー...
-
チェックボックスに全てチェッ...
-
JSP内で可変するチェックボック...
-
確認ページからフォームページ...
-
チェックボックスのON/OFFに応...
-
Objective-Cでチェックボックス...
-
EclipseでSpringを使用し、テー...
-
チェックボックスの設定
-
スクリプト内でチェックボック...
-
チェックボックスで合計値を計...
-
背景色を変えて未入力チェック...
-
チェックボックスのグループ化...
-
オフになっているチェックボッ...
-
checkboxの選択数制限と排他処...
-
複数のチェックボックス項目が...
-
Nameは配列で、チェックされた...
-
jquery 診断コンテンツにチェッ...
-
チェックボックスでor検索
おすすめ情報