jquery option uncheck

jQuery にお友達になって欲しいと思ってはいるんですが中々難しく

何したかったかっていうと Django の吐く form で
とある field でとある項目選んだら他の field がビョコっと現れるっていう
で、form.as_table とかだと tr/th/td には何の attribute も振られてなくて
どないして選択せいっちゅうねんと思ったんでリファレンス一生懸命読みまして
Traversing/closest - jQuery JavaScript Library
closest って函数が直近の entity 捜してくれるってんでターゲットは確定

bind で event に対して函数が割りあてれるのは理解してたので
select の場合は select かと思ってたら click だっていうのに試行錯誤したけど
event と函数の bind も OK

隠したり出したりってのは CSS で visibility とか display とかいじればいいのかと思い
display で none と inline でと思ったら table が崩れてしまう
inline じゃなくって table 関係のものを指定してやらなきゃいけなかったみたいなんだけど
ぼーっとリファレンス見てたら hide って見付けて show も見付けて
show なんてちゃんと文脈読んでくれて感動したりして
つか、もしかして display 属性消して default に戻してるだけなのかな??

で、select で選択外したときには出てきた入力項目空にした方がいいんじゃないかと思い
radio はどうやって外すのよ! っていうとググった結果
jQuery: Check / uncheck form checkbox and radio

.removeAttr("checked")

こんなんで OK
普通の text field は

.attr("value", "")

ってしてみた

で、できたのが

$(function() {
    $("[for*=_opt]").closest("tr").hide()
    if ($("[id^=id_foo_opt_]").attr("checked")) {
        $("[for*=foo_opt]").closest("tr").show();
    }
    if ($("#id_bar_opt").attr("value")) {
        $("#id_bar_opt").closest("tr").show();
    }

    $("option[value=foo]").bind("click",
        function () {
            $("[for*=foo_opt]").closest("tr").show();
        }
    )
    $("#id_abc > *").not("[value=foo]").bind("click",
        function () {
            $("[for*=foo_opt]").closest("tr").hide();
            $("[id^=id_foo_opt_]").removeAttr("checked");
        }
    )

    $("#id_bar > option").filter("[value=2]").bind("click",
        function () {
            $("#id_bar_opt").closest("tr").show();
        }
    )
    $("#id_bar > option").not("[value=2]").bind("click",
        function () {
            $("#id_bar_opt").closest("tr").hide();
            $("#id_bar_opt").attr("value", "");
        }
    )
})

こんなんなんだけど、HTML の方が無いと何が何だか分からないかしら

<tr><th><label for="id_abc">FOO:</label></th><td><select name="abc" id="id_abc">
<option value="" selected="selected">---------</option>
<option value="new">新</option>
<option value="old">旧</option>
<option value="foo">他</option>
</select></td></tr>

<tr><th><label for="id_foo_opt_0">他って:</label></th><td><ul>
<li><label for="id_foo_opt_0"><input type="radio" id="id_foo_opt_0" value="xxx" name="foo_opt" /> xxx</label></li>
<li><label for="id_foo_opt_1"><input type="radio" id="id_foo_opt_1" value="yyy" name="foo_opt" /> yyy</label></li>
<li><label for="id_foo_opt_2"><input type="radio" id="id_foo_opt_2" value="zzz" name="foo_opt" /> zzz</label></li>
</ul></td></tr>


<tr><th><label for="id_bar">BAR:</label></th><td><select name="bar" id="id_bar">
<option value="" selected="selected">---------</option>
<option value="0">要</option>
<option value="1">不要</option>
<option value="2">済</option>
</select></td></tr>

<tr><th><label for="id_bar_opt">済んだのは:</label></th><td><input id="id_bar_opt" type="text" name="bar_opt" maxlength="10" /></td></tr>

こんな感じ

Django は input とかに label を付けてるからその label の for 捜して
_opt で終わってたらとりあえず隠しちゃって
でも何か値が入ってるようだったらやっぱ見せるようにしています
あぁ、別に text とか radio で個別にやらなくても
とにかく _opt なものに片っ端からやってもいいのか
text が checked かどうか調べてもきっとスルーしてくれるよね!

value が foo の option が選ばれたら、対応する _opt の直近の tr を show
それ以外の option が選ばれたら hide して check を外す
id_foo_opt-* は radio なのです
何か、show のときの selector が唐突だなぁ

で、似たことを bar で id_bar_opt が text の場合にやってます

何かもっと沢山ググってるんだけど、まとめるの面倒

1. jquery firebug
   
2. django form jquery
3. django jquery _html_output
4. selector jquery
5. jquery parent
6. jquery select option
7. jquery select option bind
8. jquery select 選択されたら
9. jquery 選択解除
10. jquery 選択解除 select
11. jquery hide
12. jquery select option unselect
13. jquery select checked
14. jquery option uncheck
15. jquery value remove

今日 jquery 入ってるので少なくともこんだけググりました
教訓はいつもと同じ

「ドキュメント・リファレンスを読もう」