- 締切済み
セレクト選択時にチェックボックスをオフにしたい
フォームでセレクトを選択すると、連動してチェックボックスをオフにする仕組みを作りたいのですが、分からずjavascriptで解決できないかと思っております。 現在の問題は test1をセレクトし、オプション1のいずれかのチェックボックスにチェックをしたあと、 セレクトを再度し直し、test3を選びオプション3でいずれかのチェックボックスにチェックした場合、 オプション1で選んだチェックボックスの内容も送信されることです。 セレクトで、何かを選択したらチェックボックスがオフされるようになればと思っております。 ちなみに同じページ内にチェックボックスが複数あります。 <html> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ $(".station").addClass('hide'); $("#hoge").change(function(){ $(".station").addClass('hide'); $('#' + $("#hoge option:selected").attr("class")).removeClass("hide"); });}) </script> <style type="text/css"> <!-- .hide{display:none;} --> </style><body><form> <select name="c_s" id="hoge"> <option value="none" selected="selected" class="">選択して下さい</option> <option value="test1" class="c1_1">test1</option> <option value="test2" class="c1_2">test2</option> <option value="test3" class="c1_3">test3</option> </select> <div id="c1_1" class="station opt"> オプション1<br /> <input type="checkbox" name="option1" id="option" value="ch_option1" />ch_option1<br /> <input type="checkbox" name="option2" id="option" value="ch_option2" />ch_option2<br /> </div> <div id="c1_2" class="station opt"> オプション2<br /> <input type="checkbox" name="option11" id="option" value="ch_option11" />ch_option11<br /> <input type="checkbox" name="option12" id="option" value="ch_option12" />ch_option12<br /> <input type="checkbox" name="option13" id="option" value="ch_option13" />ch_option13<br /> </div> <div id="c1_3" class="station opt"> オプション3<br /> <input type="checkbox" name="option21" id="option" value="ch_option21" />ch_option21<br /> <input type="checkbox" name="option22" id="option" value="ch_option22" />ch_option22<br /> </div> </form></body></html>
- k_yuichi
- お礼率0% (0/1)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- itu1989
- ベストアンサー率44% (37/83)
チェックボックスをオフにしたい要素を取得してchecked = falseを設定する。 質問中のチェックボックスではどのチェックボックスがどのセレクトに属するか分からないのでname属性を変更して、後はinputタグの要素を全取得しtypeとname属性を確認しながらセレクトしたオプションに属さないチェックボックスをオフにしていけば良いと思います。 <input type="checkbox" name="option1_1" id="option1_1" value="ch_option1_1"/>ch_option1_1<br/> <input type="checkbox" name="option1_2" id="option1_2" value="ch_option1_2"/>ch_option1_2<br/> <input type="checkbox" name="option2_1" id="option2_1" value="ch_option2_1"/>ch_option2_1<br/> <input type="checkbox" name="option2_2" id="option2_2" value="ch_option2_2"/>ch_option2_2<br/> <input type="checkbox" name="option2_3" id="option2_3" value="ch_option2_3"/>ch_option2_3<br/> <input type="checkbox" name="option3_1" id="option3_1" value="ch_option3_1"/>ch_option3_1<br/> <input type="checkbox" name="option3_2" id="option3_2" value="ch_option3_2"/>ch_option3_2<br/> 上記のようにすれば、name属性で「option1」で始まるのはセレクト1、「option2」で始まるのはセレクト2に属すると判断が出来ます。 JQueryを実装するなら確か特定のエレメントの子要素の取り出しが出来たと思うので楽かと思います。 後、質問中の<input>タグのid属性の値が全て同じですがhtml上でidは一意に照会できるべき値だと思うので変えた方が良いと思います。
