- 締切済み
selectboxとcheckbox連動
下記ソースについて質問です。 jqueryを使って、 チェックボックスにチェックを入れたら、 一個目のセレクトボックスで選択した値を 二個目のセレクトボックスで選択しているようにしたいのですが、 ここからどうしたらよいでしょうか？ 具体的な方法を教えていただけないでしょうか？ <html> <head> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script> <!-- jQuery.noConflict(); var j$ = jQuery; j$(function () { j$(":input").focus(function(){ j$(this).css("background" ,"#7DBFE2"); }).blur(function(){ j$(this).css("background" ,""); }) j$(":submit").focus(function(){ j$(this).css("background" ,""); }).blur(function(){ j$(this).css("background" ,""); }) if (j$('input[type=checkbox]:last').attr('checked')) { j$("#selectAir").removeAttr("disabled"); } else { j$("#selectAir").attr("disabled", "disabled"); } j$('input[type=checkbox]:last').click(function() { if (this.checked) { j$("#selectAir").removeAttr("disabled"); j$("#selectAir").change($("#selectAirDelivery option:selected")); } else { j$("#selectAir").attr("disabled", "disabled"); } }); }); --> </script> </head> <body> <select id="selectAirDelivery" name="selectAirDelivery" class=""> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </td> <td width="55%" bgcolor="#FFF8DF"> <input id="chkIrai_sl1608" name="chkIrai_sl1[]" type="checkbox" value="608"><label for="chkIrai_sl1608"></label> <select id="selectAir" name="selectAir" class=""> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </td> </tr> </table> </body> </html>
- itio0713
- お礼率100% (6/6)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
たんにチェックしたときにだけs2がs1と合えばよいということですかねぇ？ function func(e){ var t = (e.srcElement || e.target); var ch=document.getElementById('chkIrai_sl1608'); var sl1=document.getElementById('selectAirDelivery'); var sl2=document.getElementById('selectAir'); if(t==ch){ if(ch.checked) sl2.selectedIndex=sl1.selectedIndex; } } でよいかも
- fujillin
- ベストアンサー率61% (1594/2576)
両方のセレクタのオプション値が同じになっているという前提でよければ （jqueryはあまりよく知りませんが…） チェックしたときに（だけ）反映すればよいのなら $('#chkIrai_sl1608').click(function(){ if ($(this).attr('checked')) $('#selectAir').val($('#selectAirDelivery').val()); }); あるいは、チェックしてあれば常に連動するようにするのなら $('#selectAirDelivery').change(function(){ if ($('#chkIrai_sl1608').attr('checked')){ $('#selectAir').val($('#selectAirDelivery').val()); }});
お礼
おかげさまで仕様を満たすようにつくることができました。 ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
jQueryは使ってないので普通に・・・ <head> <script> try{ document.addEventListener('change',function(e){func(e)},true); }catch(x){ document.attachEvent('onclick',function(e){func(e)}); } function func(e){ var t = (e.srcElement || e.target); var ch=document.getElementById('chkIrai_sl1608'); var sl1=document.getElementById('selectAirDelivery'); var sl2=document.getElementById('selectAir'); if(t.nodeName=="SELECT" || (t.nodeName=="INPUT" && t.type=="checkbox")){ if(ch.checked) sl2.selectedIndex=sl1.selectedIndex; } } </script></head> <body> <select id="selectAirDelivery" name="selectAirDelivery" class=""> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </td> <td width="55%" bgcolor="#FFF8DF"> <input id="chkIrai_sl1608" name="chkIrai_sl1[]" type="checkbox" value="608"><label for="chkIrai_sl1608"></label> <select id="selectAir" name="selectAir" class=""> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </td> </tr> </table> </body> 条件を複雑にすれば結構いろいろ対応できそう
お礼
すばやい回答ありがとうございます。 二個目のセレクトボックスはチェックを入れている状態であっても、 一個目のセレクトボックスとは関係なく、 選択できるようにしたいのですが…
関連するQ&A
- checkboxとselectメニューの連動およびalertの出し方
メールフォームを利用し、簡単なショッピングフォームを作成しているのですが、壁にぶち当たりましたので、恐縮しておりますが、はじめて質問させて頂きます。よろしくお願い致します。 function setTF(cOBJ,fName1,fName2) { document.myFORM[fName1].disabled = !cOBJ.checked; document.myFORM[fName2].disabled = !cOBJ.checked; } function delWarn(obj) { if(obj.checked) { var cf = confirm( '数量も必ずご入力ください' ); if(cf) obj.checked = true; else obj.checked = false; } } ---- <form action="～test.cgi" method="post" name="myFORM"> <INPUT type="checkbox" name="item1" value="商品1" onClick="setTF(this,'item1kazu','service1'),delWarn(this)">商品1 <SELECT name="item1kazu" disabled> <OPTION value="">数量</OPTION> <OPTION value="（1本）">1</OPTION> <OPTION value="（2本）">2</OPTION> <OPTION value="（3本）">3</OPTION> </SELECT>本<br> <INPUT type="checkbox" name="item2" value="商品2" onClick="setTF(this,'item2kazu'),delWarn(this)">商品2 <SELECT name="item2kazu" disabled> <OPTION value="">数量</OPTION> <OPTION value="（1本）">1</OPTION> <OPTION value="（2本）">2</OPTION> <OPTION value="（3本）">3</OPTION> </SELECT>個<br> <INPUT type="checkbox" name="item3" value="商品3" onClick="setTF(this,'item3kazu'),delWarn(this)">商品3 <SELECT name="item3kazu" disabled> <OPTION value="">数量</OPTION> <OPTION value="（1本）">1</OPTION> <OPTION value="（2本）">2</OPTION> <OPTION value="（3本）">3</OPTION> </SELECT>セット<br> <p><INPUT type="checkbox" name="service1" value="サービス1" disabled>サービス1</p> <input type="submit" name="sendBtn" value="内容確認画面へ"> </FORM> 内容は、 商品1、2、3にそれぞれチェックボックスをおき、それを選択したらそれぞれ数量の選択（selectメニュー）がはじめて出来る様になる。さらにサービス1は商品1を選択するとチェック可能になるというものです。ここまでは順調に実現できました。 問題は、商品を選択した時のみ数量の選択を必須にしたい、という所です。 使用予定のcgiでは、入力必須項目に設定すると、商品の選択をしていない数量部分もおのずと必須になり具合が悪いため、 javascriptのalertを利用し上手く制御できやしないかと、ない頭をひねって、現在の状況で止まってしまいました...。 現状、商品1をクリックすると「数量も必ずご入力下さい」というalertがでて、数量選択がアクティブに。ただし、商品2、商品3はalertが出ません。 また、もしこれが実現可能になったとしても商品ごとにalertが表示され、うっとおしいのはさることながら、あくまでも意識づけで入力必須ではないため、もっと良い方法はないか、是非ご教授願いたいと思っております。 理想としては、商品にチェックしたもののみ数量選択を必須とする、 →sbmitを押した際、「数量を選択して下さい」というalertを表示。 が実現できればと願っております。 （チェックboxなしで数量のみでやればカンタンなのでしょうが、今回はこちらの構成でいきたいと思っております...） どなたか是非アドバイス頂ければ幸いです、よろしくお願い致します。
- 締切済み
- JavaScript
- ラジオボタンとプルダウンを連動させたい
ラジオボタンとプルダウンを連動させたい いつもお世話になっております。 ラジオボタンのvalue値に連動してプルダウンの内容が変わるということがしたいと思い、 数日前からいろいろと格闘していましたが、煮詰まったため相談に伺いました。 http://okwave.jp/qa/q2928590.htmlのANo.2の回答 -------------------------------------------------------------------- <script language="javascript"> function changeFunc(obj){ var v=obj.value; var f=obj.form; for(var i=0;i<f.length;i++){ if(f[i].type=="checkbox"){ if(f[i].className==v || v=="") f[i].disabled=false; else f[i].disabled=true; } } } </script> <form> <select name="genre" onChange="changeFunc(this)"> <option value="">食べ物</option> <option value="grain">穀物</option> <option value="fruit">果物</option> <option value="meat">生き物</option> </select> <br /> <input type="checkbox" value="お米" class="grain">お米<br /> <input type="checkbox" value="そば" class="grain">そば<br /> <input type="checkbox" value="りんご" class="fruit">りんご<br /> <input type="checkbox" value="みかん" class="fruit">みかん<br /> <input type="checkbox" value="さかな" class="meat">さかな<br /> <input type="checkbox" value="豚肉" class="meat">豚肉 </form> -------------------------------------------------------------------- を参考にいろいろと試してはみたのですが、こちらは「プルダウン→チェックボックス」で、 まったく逆でどうしたら良いのかまったくわかりませんでした。 他のウェブサイトの情報やサンプルも試したのですが、value値やname値他の問題でうまくできませんでした。 希望の仕様は ・ラジオボタンの選択肢によって、プルダウン（セレクトボックス）の内容が変わる（アイテムが消える、または選択できなくなる）。 ・ラジオボタン・プルダウン共にvalue値・name値は決まったものがある（プルダウンのvalue値は日本語） 以上です。 javascriptは素人ですので、わかりにくい質問になっているかもしれないのですが、お力を貸していただけましたら助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 条件により押せないボタンを作りたい
2つのセレクトボックスがあり、どちらも選択していれば「検索」ボタンを押せるが どちらか1つでも選択していなければ「検索」ボタンを押せない状態にしたいのですが どのようにすれば可能でしょうか？ <script type="text/javascript"> jQuery(function() { jQuery('#change_btn').click(function() { jQuery.post('price.php', { size : jQuery('#size').attr('value'), days : jQuery('#days').attr('value') }, callBack); }); }); function callBack(data) { jQuery('#change_area').html(data); } </script> <form action="" id="form1" method="post"> <select name="size" id="size"> <option value="">---選択してください---</option> <option value="s1">サイズ01</option> <option value="s2">サイズ02</option> <option value="s3">サイズ03</option> </select> <select name="days" id="days"> <option value="">---選択してください---</option> <option value="d6">6日</option> <option value="d8">8日</option> </select> <input type="button" id="change_btn" value="検索" /> </form>
- ベストアンサー
- JavaScript
- (jQuery)同じクラス名のオブジェクトを一斉操
jQueryで同じクラス名のオブジェクトを一斉操作するにはどうしたら良いでしょうか？ 【したいこと】 ３つのチェックボックスのいずれかにチェックを入れると disabledである「お問合わせ」と「お申込み」ボタンがクリックできるようにしたいです。 １つでもチェックが入っていなければボタンはdisabledにしたいです。 【現状】 ３つのチェックボックスの１番上のclass="foo"のみクリックすると動作します。 ▼【 HTML 】 <input type="checkbox" class="foo"> <input type="checkbox" class="foo"> <input type="checkbox" class="foo"> <input type="submit" class="bar" value="お問合わせ"> <input type="submit" class="bar" value="お申込み"> ▼【 jQuery 】 // アクセス時はボタンは無効にする。 $(document).ready(function(){ $('.bar').attr('disabled', true); }); // チェックボックスクリックアクション $('.foo').click(function() { $('.bar').each(function() { if($('.foo').prop('checked') == true) { $('.bar').attr('disabled', false); } else { $('.bar').attr('disabled', true); } }); }); ご教授の程どうぞ宜しくお願い致しますm(__)m
- ベストアンサー
- JavaScript
- checkboxをshiftキーを押しながらクリックすると複数選択する
checkboxをshiftキーを押しながらクリックすると複数選択するソースなのですが、 htmlファイルでは動作するのですが、以下のようにperl(cgiファイル)では複数選択できません。 もしかしたらjavaのコーディングの問題かもしれませんが、行き詰っております。 どなたかご教授お願い申し上げます。 ↓------------------------------------------- #!c:/Perl/bin/perl require 'cgi-lib.pl'; require 'jcode.pl'; print "Content-type: text/html\n\n"; print <<EOM; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.field_j.js"></script> <script type="text/javascript"> var bIsFirebugReady = (!!window.console && !!window.console.log); $(document).ready( function (){ $("#idPluginVersion").text($.Field.version); setLimitSelection(); $('input[name="chkRange"]').createCheckboxRange(function(bChecked){ $("label[for=" + this.id + "]").css("background-color", (bChecked) ? "#ffffff" : ""); }); $("#frmNavigation").autoAdvance(); window.oSelector = $("#selector"); } ); function setLimitSelection(){ $('input[name="chkLimit"]').limitSelection( { limit: 3, onfailure: function (n){ $("#idCheckboxMsg").html( "You can not select more than " + n + " items." ); return false; }, onsuccess: function (n){ $("#idCheckboxMsg").html(""); return false; } } ); $('select[name="selLimit"]').limitSelection(2); } </script> <title>test</title> </head> <body> <form action="" method="post" id="frmCreateCheckboxRange" onsubmit="return false;"> <p> <table> <tr> <td> <input type="checkbox" name="chkRange" id="chkRange_1" value="1" /> </td> <td> <input type="checkbox" name="chkRange" id="chkRange_2" value="2" /> </td> <td> <input type="checkbox" name="chkRange" id="chkRange_3" value="3" /> </td> </tr> </table> </p> </form> </body> </html> EOM ↑------------------------------
- ベストアンサー
- Perl
- jQuery if文の条件分岐 (。ノдヽ。)
セレクトボックスで「2012年８月10日・11日」のみを入力不可にしてあげたいのですが、条件がうまく設定できずに困っています。 入力不可にはなるのですが、どうしても2012年8月以外の月でも入力不可になってしまいます。 どなたか、お知恵を貸して下さい(*_ _) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> </head> <body> <script type="text/javascript"> <!-- $(function(){ if($("select[name='depyear'] option[value='2012']")) {if($("select[name='depmonth'] option[value='8']")) {$("select[name='depday'] option[value='10']").attr("disabled","disabled"); $("select[name='depday'] option[value='11']").attr("disabled","disabled"); } }else{}; }); --> </script> <table> <tr> <td bgcolor="#ffffff"> <select size="1" name="depyear"> <option value="2012">2012</option> <option value="2013">2013</option> </select> 年 <select size="1" name="depmonth"> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> 月 <select size="1" name="depday"> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> </select> 日</td> </tr> </table> </body>
- ベストアンサー
- JavaScript
- SelectBoxで、もう一つのSelectBoxを制御する方法
自動車メーカーのselectboxがあり、選択したメーカーにより二つ目の車名のselectboxの表示名が変わる。 トヨタ→カローラ、プリウス 日産→マーチ ホンダ→アコード、フィット そして、「登録」をクリックすると選択された自動車メーカーと車名のvalueがサーバーに送信される。 function company_onchange(){}の中で制御文を書くと思うのですが具体的にどのように書けばよいのか分かりません。ご教授頂けたらと思います。宜しくお願い致します。 <script language="javascript"> function company_onchange(){ } </script> <form name="RegisterForm" method="post" action="/car/RegisterAction.do" target="body"> <table> <tr> <td colspan="2">自動車メーカー <select name="companyCd" onchange="company_onchange(form);"> <option value="100">トヨタ </option> <option value="200">日産 </option> <option value="300">本田 </option> </select> </td> <td colspan="2">車名 <select name="carName"> <option value="10000">カローラ</option> <option value="10003">プリウス</option> <option value="20002">マーチ</option> <option value="30001">アコード</option> <option value="30002">フィット</option> </select> </td> </tr> </table> <input type="submit" name="action" value="登録"> </form>
- ベストアンサー
- JavaScript
- ラジオボタンの選択でチェックボックスのON/OFFを連動
ラジオボタンを選択すると、連動してチェックボックスにチェックが入れられる仕組みを作りたいのですが。 本番環境ではこの仕組みを3つほど使用したいです。 現在ここまでは出来ていますが、2つ・3つとこの仕組みを増やすと、動作が出来なくなってしまいます。 さらに、ラジオボタンを選択するたびにチェックボックスのチェックが初期化される仕組みにしたいのですが・・・＞＜ どなたか教えて頂けないでしょうか？ <html> <head> <script> window.onload=function(){ document.getElementById("deta1").onclick=function(){ detagroupDisabled(this.form,true); } document.getElementById("deta2").onclick=function(){ detagroupDisabled(this.form,true); } document.getElementById("deta3").onclick=function(){ detagroupDisabled(this.form,false); } } function detagroupDisabled(f,flg){ var objs=f.getElementsByTagName("input"); for(var i=0;i<objs.length;i++){ if(objs[i].className=="detagroup") objs[i].disabled=flg; } } </script> </head> <body> <form action="./postmail.cgi" method="post"> <input type="radio" name="FPCデータ" id="deta3" value="アリ"><label for="deta3">アリ</label> <input type="checkbox" name="FPCデータ アリ" id="DXF" class="detagroup" value="DXF" disabled><label for="DXF">DXF</label> <input type="checkbox" name="FPCデータ アリ" id="ガーバ" class="detagroup" value="ガーバ" disabled><label for="ガーバ">ガーバ</label> <input type="checkbox" name="FPCデータ アリ" id="PDF" class="detagroup" value="PDF" disabled><label for="PDF">PDF</label> <input type="radio" name="FPCデータ" id="deta1" value="ナシ" checked><label for="deta1">ナシ</label> <input type="radio" name="FPCデータ" id="deta2" value="アリ"><label for="deta2">相談</label><br><br> <input type="radio" name="補強板" value="ナシ" checked="checked">ナシ <input type="radio" name="補強板" value="アリ">アリ <input type="checkbox" name="補強板" value="ポリイミド">ポリイミド <input type="checkbox" name="補強板" value="ポリエステル">ポリエステル <input type="checkbox" name="補強板" value="ガラエポ">ガラエポ <input type="checkbox" name="補強板" value="相談">相談<br><br> <input type="radio" name="印刷" value="ナシ" checked="checked">ナシ <input type="radio" name="印刷" value="アリ">アリ <input type="checkbox" name="印刷" value="銀シールド">銀シールド <input type="checkbox" name="印刷" value="銀ペースト">銀ペースト <input type="checkbox" name="印刷" value="銅ペースト"> 銅ペースト <input type="checkbox" name="印刷" value="シルク">シルク 色 <SELECT NAME="印刷"> <OPTION SELECTED VALUE="---">--- <OPTION VALUE="白">白 <OPTION VALUE="黒">黒 <OPTION VALUE="他">他 </SELECT> </form> </body> </html>
- 締切済み
- JavaScript
- シャドウボックスとjQueryを共存させるには
シャドウボックス3.0.3を利用しています。 チェックボックスを複数選択するjQueryをシャドウボックス内で利用したいのですが、 シャドウボックスとjQueryがコンフリクトしてしまうようで、実現できません。 共存させるにはどのように記述を変えれば良いでしょうか？ <head> <script type="text/javascript" src="../common/js/jquery-1.3.1.min.js"></script> <!-- シャドウボックス --> <script type="text/javascript" src="../common/js/shadowbox/shadowbox.js"></script> <link rel="stylesheet" type="text/css" href="../common/js/shadowbox/shadowbox.css"> <script type="text/javascript"> $(document).ready(function(){ Shadowbox.init(); }); </script> <!-- チェックボックスの複数選択 --> <script type="text/javascript"> $(function(){ $("#toggle").click(function(){ $('.chkbox').attr('checked', $(this).attr('checked')); }); }); </script> </head> <body> <a href="#inline" title="シャドウボックス" rel="shadowbox;width=900;height=1200">シャドウボックス</a> <div id="inline" style="display:none"> <input type="checkbox" id="toggle"> toggle<br> <br> <input class="chkbox" type="checkbox" name="ids[]" value="1"> 1<br> <input class="chkbox" type="checkbox" name="ids[]" value="2"> 2<br> <input class="chkbox" type="checkbox" name="ids[]" value="3"> 3<br> </div> </body>
- ベストアンサー
- JavaScript
- jquery複数のcheckboxの値について
どうも、はじめまして、jqueryに興味をもった初心者です。 jqueryを利用で、phpファイルにcheckboxの値を渡し、loadでphpファイルを読み込みたいのですが、うまくいきません。。ご存知の方いましたら、 お手数ですが、教えてください。。 環境、php5.1,jquery1.4, ソース <!--html側--> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="chk.js"></script> <title></title></head> <body> <input type="checkbox" name="test[]" id="test" value="1">test1 <input type="checkbox" name="test[]" id="test" value="2">test2 <input type="checkbox" name="test[]" id="test" value="3">test3 <input type="checkbox" name="test[]" id="test" value="4">test4 <input type="submit" value="sub" id="sub"> <div id="hbox">ここにロードしたい</div> </body> </html> //chk.js --------------------------- $(function(){ $("#sub").click(function () { var chk = $(".@test:checkbo[name^='test[]']:checked") .val(); $("#hbox").load("form.php",{test:chk}); }); }); //form.php ---------------------------- <?php echo htmlentities( print_r($_GET, true) ); ?> 以上がソースです。。。このソースだと、 checkを入れた値１つしか、phpに渡すことができません。。 checkを入れた値をすべて、phpに渡し、loadしたいのですが、 方法が分からず困ってます。 ご存知の方いましたら、お手数ですが、 分かりやすく、教えていただけませんでしょうか お願いいたします。
- ベストアンサー
- JavaScript
お礼
おかげさまで仕様を満たすようにつくることができました。 ありがとうございました。