- ベストアンサー
Checkbox について
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
質問になっていませんが・・・ 戻るボタンなどで戻った時にチェックがついたままにしたいということでしょうか？ それともまた同じページに訪問した時にチェックがついたままにしたい？ 前者はブラウザの仕様の問題なので、完璧にできる方法はありません 場合によってはjavascriptを利用してクッキーという仕組みを利用すれば 一時的にデータを保持することができます 後者の場合は、サーバー側のプログラムでやる必要があります 一つはセッションという仕組みをつかう、もうひとつはデータベースに保持して 再度アクセスしたときに表示する・・・などが一般的です
関連するQ&A
- 大量のチェックボックス状態取得について
質問させてください。 以下のようなHTML構造で連続している場合、 ID内全体のチェックボックスの状態を取得し、未チェックの物を非表示するにはどのようにすれば一番処理速度が速いのでしょうか？ <div id="hoge1"> <ul> <li> <ul class="Parents"> <li class="child"><input type="checkbox" name="AAA"></li> <li class="child"><input type="checkbox" name="BBB"></li> <li class="child"><input type="checkbox" name="CCC"></li> <li class="child"><input type="checkbox" name="DDD"></li> </ul> </li> <li> <ul class="Parents"> <li class="child"><input type="checkbox" name="AAA"></li> <li class="child"><input type="checkbox" name="BBB"></li> <li class="child"><input type="checkbox" name="CCC"></li> <li class="child"><input type="checkbox" name="DDD"></li> </ul> </li> ～～～～～～～～～～～～ ※繰り返し ～～～～～～～～～～～～ </ul> </div> 現在はjQueryで$ (ul.Parents li.child)で全体をラップし、for文のループ内で$eq()で１件毎chekedを参照し、.hide()を行っています。 動作自体は問題ないのですが、処理速度の遅さが気になっています。 速い方法でればjQueryを使用しない方法でもかまいません。 どうかよろしくお願い致します。
- ベストアンサー
- JavaScript
- checkboxについて
下のように初期状態でcheckboxにチェックされているのを buttonのresetをおすとjavascriptでチェック解除するということはできますか？ <INPUT TYPE="checkbox" name="check_no1" checked>
- ベストアンサー
- JavaScript
- 隣接セレクタの適用範囲について。
http://9-bb.com/css%E3%81%A0%E3%81%91%E3%81%A7%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8C%E9%96%8B%E3%81%84%E3%81%9F%E3%82%8A%E9%96%89%E3%81%98%E3%81%9F%E3%82%8A%E3%81%99%E3%82%8B%E3%82%A2%E3%82%B3%E3%83%BC/ 上記のサイトを参考に、CSSで開閉式のリストを作りました。 そのサイトのHTMLの1行目～10行目は下記の様になっています。 <div class="menu"> <label for="Panel1">ボタン1</label> <input type="checkbox" id="Panel1" class="on-off" /> <ul> <li><a href="">リンク1</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> </ul> それに対応したCSSは、下記の様になっています。 input[type="checkbox"].on-off + ul{ height: 0; overflow: hidden; } input[type="checkbox"].on-off:checked + ul{ height: 200px; } つまり、 <input type="checkbox" id="Panel1" class="on-off" /> の後ろの <ul>タグに働きかける構造になっています。 それを改良して、<ul>タグの部分だけでなく、幅広い範囲に働きかける構造にしたいです。 そこで、対応しているCSSの隣接セレクタ「+」の後ろの「ul」を「span」にして、HTMLも「span」タグで括りました。 input[type="checkbox"].on-off + span{ height: 0; overflow: hidden; } input[type="checkbox"].on-off:checked + span{ height: 200px; } <div class="menu"> <label for="Panel1">ボタン1</label> <input type="checkbox" id="Panel1" class="on-off" /> <span> <ul> <li><a href="">リンク1</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> </ul> </span> しかし、上手く動作しません。 要するに、「ボタン１」で開閉できる範囲を「リスト1」だけでなく「リスト１」「リスト２」の両方に効かせたり、「ul」タグに囲まれた範囲だけでなく、他のタグも含めた範囲にも効かせたいです。 要点を得ない質問になりましたが、アドバイスをお願いします。
- 締切済み
- CSS
- luxbarの表示について2
luxbarについて再度お聞きしたいです。 .luxbar-navigation{ justify-content: flex-start; } でIE11でもうまく表示されましたが、どのブラウザもハンバーガーメニューにした時、階層下メニューは開いたままでした。これを閉じた状態から開くように修正できないのでしょうか？また、ナビバー時の背景色は任意で好みの色に変更できないでしょうか？よろしくお願いいたします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css"> <style> <!-- .luxbar-navigation{ justify-content: flex-start; } --> </style> </head> <body> <div class="luxbar luxbar-static"> <input type="checkbox" id="luxbar-checkbox" class="luxbar-checkbox"> <div class="luxbar-menu luxbar-menu-right luxbar-menu-dark"> <ul class="luxbar-navigation"> <li class="luxbar-header"> <a class="luxbar-brand" href="#">Brand</a> <label class="luxbar-hamburger luxbar-hamburger-doublespin" for="luxbar-checkbox"> <span></span> </label> </li> <li class="luxbar-item active"><a href="#">Home</a></li> <li class="luxbar-item dropdown"><a href="#">Users</a> <ul> <li class="luxbar-item" ><a href="#">Max</a></li> <li class="luxbar-item" ><a href="#">Edgar</a></li> <li class="luxbar-item" ><a href="#">John</a></li> </ul> </li> </ul> </div> </div> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- luxbarのIE表示について
HP作成でハンバガーメニューの作成が難しく、ネットで探していたらluxbarが便利そうでした。早速作成して色々なブラウザで検証してみたのですがIEのみ表示が上手くできません非対応なのでしょうか？ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css"> </head> <body> <div class="luxbar luxbar-static"> <input type="checkbox" id="luxbar-checkbox" class="luxbar-checkbox"> <div class="luxbar-menu luxbar-menu-right luxbar-menu-dark"> <ul class="luxbar-navigation"> <li class="luxbar-header"> <a class="luxbar-brand" href="#">Brand</a> <label class="luxbar-hamburger luxbar-hamburger-doublespin" for="luxbar-checkbox"> <span></span> </label> </li> <li class="luxbar-item active"><a href="#">Home</a></li> <li class="luxbar-item dropdown"><a href="#">Users</a> <ul> <li class="luxbar-item" ><a href="#">Max</a></li> <li class="luxbar-item" ><a href="#">Edgar</a></li> <li class="luxbar-item" ><a href="#">John</a></li> </ul> </li> </ul> </div> </div> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- checkboxの文字連結の方法を教えてください
<INPUT name="ch" type="checkbox" value="1">1 <INPUT name="ch" type="checkbox" value="2">2 <INPUT name="ch" type="checkbox" value="3">3 <INPUT name="ch" type="checkbox" value="4">4 <INPUT name="ch" type="checkbox" value="5">5 選択してボタンを押すとチェックされた文字だけをカンマで連結して <a href="http://xxx.xx.ne.jp/xx.cgi?1,3,5">リンク</a> と表示したいのですがどのように書けばいいのでしょうか。 よろしくお願いします。
- 締切済み
- JavaScript
- jqueryで特定の要素をdivで囲う
jqueryを使い、HTMLの特定の要素をdivで囲いたいと思っています。 元のHTMLのソースは、 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> ========= このようになっております。 上記のソースを、以下のように２か所<div class="wrap">で<ul class="spAcodNav">を囲いたいと思っています。 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 mb20">●●●</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> </div> ========= jqueryでwrapAllなどを使って試しているのですが、うまいいかず、 お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- 大量のcheckboxにcheckedを入れる
チェックボックスが50個あります。 送信ボタンを押して元のページを再度開きます。 そのときにチェックしたボックスにチェックを入れた状態にしたいです。 inputタグの中に<?php if(isset($checkbox2) && in_array('b2',$checkbox2)){echo ' checked';} ?>を入れていますが単調になってしまいます。 単調にならずにする方法はありますか？ <input type="checkbox" name="chk1[]" value="a1" />の場合はインデックスが固定でないのでできませんでした。 その他いけない箇所があれば教えて下さい。 お願いします。 <?php if(isset($_GET["chk1"])){ $checkbox1 = $_GET["chk1"]; for($i=0; $i<sizeof($checkbox1); $i++){ print $checkbox1[$i]."<br />"; } } if(isset($_GET["chk2"])){ $checkbox2 = $_GET["chk2"]; foreach($checkbox2 as $key => $val){ print $val."<br />"; } } ?> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form method="get" action="checkbox.php"> <input type="checkbox" name="chk1[]" value="a1" /> <input type="checkbox" name="chk1[]" value="a2" /> <input type="checkbox" name="chk1[]" value="a3" /> <input type="checkbox" name="chk1[]" value="a4" /> <input type="checkbox" name="chk1[]" value="a5" /> <input type="checkbox" name="chk1[]" value="a6" /> <input type="checkbox" name="chk1[]" value="a7" /> <input type="checkbox" name="chk1[]" value="a8" /> <input type="checkbox" name="chk1[]" value="a9" /> <input type="checkbox" name="chk1[]" value="a10" /> <br /> <input type="checkbox" name="chk2['b1']" value="b1" <?php if(isset($checkbox2) && in_array('b1',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b2']" value="b2" <?php if(isset($checkbox2) && in_array('b2',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b3']" value="b3" <?php if(isset($checkbox2) && in_array('b3',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b4']" value="b4" <?php if(isset($checkbox2) && in_array('b4',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b5']" value="b5" <?php if(isset($checkbox2) && in_array('b5',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b6']" value="b6" <?php if(isset($checkbox2) && in_array('b6',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b7']" value="b7" <?php if(isset($checkbox2) && in_array('b7',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b8']" value="b8" <?php if(isset($checkbox2) && in_array('b8',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b9']" value="b9" <?php if(isset($checkbox2) && in_array('b9',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b10']" value="b10" <?php if(isset($checkbox2) && in_array('b10',$checkbox2)){echo ' checked';} ?>/> <br /> <input type="submit" value="送信" /> </form> </body> </html>
- 締切済み
- PHP
- 複数のチェックボックスをチェックしたい
質問させてください。 複数のチェックボックスを項目別に全てチェックするようなjqueryの書き方をご教授いただきたいです。 <table> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />a</li> <li><input type="checkbox" name="" value="" />b</li> <li><input type="checkbox" name="" value="" />c</li> <li><input type="checkbox" name="" value="" />d</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />e</li> <li><input type="checkbox" name="" value="" />f</li> <li><input type="checkbox" name="" value="" />g</li> <li><input type="checkbox" name="" value="" />h</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />i</li> <li><input type="checkbox" name="" value="" />j</li> <li><input type="checkbox" name="" value="" />k</li> <li><input type="checkbox" name="" value="" />l</li> </td> </tr> </table> 上記のようにそれぞれの項目に「まとめてチェック」のチェックボックスがあり、 そこに該当するチェック項目は全てチェックorチェックを外す っという挙動の実装を考えています。 jqueryでやりたいのですが、javascript、jqueryがかなり苦手でいまいちいきません。 ググって $(function(){ $('#all').click(function(){ if(this.checked){ $('#check input').attr('checked','checked'); }else{ $('#check input').removeAttr('checked'); } }); }); このソースを見つけたのですが、これだと一つの項目でしか実装できず 項目分このjqueryを書くのも余り良い書き方だと思えません。 どなたか、ご教授お願いいたします。
- ベストアンサー
- JavaScript
- jQueryを使ってスタイルの変更
----- 実現したいこと ----------------------------- 以下をjQueryを使って実現したいです。 ・「名前」のうちどれか１つが選択されたら 「名前」の背景を白くする。(「名前」ulタグのbackground-colorを#ffffffへ) ・「季節」のうちどれか１つが選択されたら 「季節」の背景を白くする。(「季節」ulタグのbackground-colorを#ffffffへ) 方針だけでもご教授いただければ幸いでございます。 ----- ソース ------------------------------------- <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> </script> </head> <body> □名前<br> <ul style="background-color:#ff0000;"> <input type="checkbox" value="1">一郎<br> <input type="checkbox" value="2">二郎<br> <input type="checkbox" value="3">三郎 </ul> <br> <br> <br> □季節<br> <ul style="background-color:#ff0000;"> <input type="checkbox" value="1">春<br> <input type="checkbox" value="2">夏<br> <input type="checkbox" value="2">秋<br> <input type="checkbox" value="2">冬 </ul> </body> </html>
- ベストアンサー
- JavaScript
補足
ご指摘ありがとうございます。 後者の方です。 要するに、最初はチェックがついてないままですが必要によってチェックをついて置くことですね！