jqueryで書いた記述をif文を使って短くしたい

Question

フォームの箇所にあるラジオボタンの選択によって表示・非表示する切り替えをしているのですが、書き方をif文をつかって短くしたいのですが、教えていただけないでしょうか？
自分で試しに書いてみたのですが、うまく動作がしなくなったので質問しました。

下記がコードになります。
ラジオボタンの箇所は、お問い合わせ内容のところになります。
また、表示・非表示が動作する項目は、募集要項です。
ご確認お願いします。

<form method="post" action="">
            <dl>
                <dt>お問い合わせ内容</dt>
                <dd><label for="type-1" class="check_off"><input class="radio" type="radio" name="item1" value="お問い合わせ" id="type-1" />
                <span>お問い合わせ</span></label>
                <label for="type-2" class="check_switch"><input class="radio" type="radio" name="item1" value="採用について" id="type-2" />
                <span>採用について</span></label>
                </dd>
                <div class="check_hide">
                    <dt>募集要項</dt>
                    <dd>
                        <p>
                            <label for="type-3">
                                <input class="check" type="checkbox" name="item2" value="塾事業" id="type-3" />
                                <span>塾事業</span>
                            </label>
                        </p>
                        <p>
                            <label for="type-4">
                                <input class="check" type="checkbox" name="item3" value="英語教育事業" id="type-4" />
                                <span>英語教育事業</span>
                            </label>
                        </p>
                        <p>
                            <label for="type-5">
                                <input class="check" type="checkbox" name="item4" value="留学支援事業" id="type-5" />
                                <span>留学支援事業</span>
                            </label>
                        </p>
                        <p>
                            <label for="type-6">
                                <input class="check" type="checkbox" name="item5" value="プログラミング教育事業" id="type-6" />
                                <span>プログラミング教育事業</span>
                            </label>
                        </p>
                        <p>
                            <label for="type-7">
                                <input class="check" type="checkbox" name="item6" value="高等学院事業" id="type-7" />
                                <span>高等学院事業</span>
                            </label>
                        </p>
                        <p>
                            <label for="type-8">
                                <input class="check" type="checkbox" name="item7" value="高等学院事業" id="type-8" />
                                <span>保険事業</span>
                            </label>
                        </p>
                    </dd>
                </div>

                <dt>お名前</dt>
                <dd><input type="text" name="item8" placeholder="お名前"></dd>
                <dt>ふりがな</dt>
                <dd><input type="text" name="item9" placeholder="ふりがな"></dd>
                <dt>ご住所<span class="warning">必須</span></dt>
                <dd class="postal_code">〒<input type="text" name="zip1" onKeyUp="AjaxZip3.zip2addr('zip1', 'zip2', 'address', 'address');" placeholder="432"/> - <input type="text" name="zip2" onKeyUp="AjaxZip3.zip2addr('zip1', 'zip2', 'address', 'address');" placeholder="8021"/></dd>
                <p>半角数字で郵便番号を入力していただくと、自動で住所が表示されます。</p>
                <dd><input type="text" name="item10" placeholder="静岡県浜松市中区佐鳴台5-28-2"/></dd>
                <dt>電話番号</dt>
                <dd><input type="tel" name="item11" placeholder="053-449-1144"></dd>
                <dt>メールアドレス<span class="warning">必須</span></dt>
                <dd><input type="mail" name="email" placeholder="[e-mail]"></dd>
                <dt>お問い合わせ内容</dt>
                <dd><textarea name="item12"></textarea></dd>
            </dl>
            <button type="submit" name="submit01" value="内容を確認する" class="submit">内容を確認する</button>
        </form>

//   お問い合わせフォームチェックボタンon off動作している js

$('.check_switch').click(function(){
	if($("#type-2").prop('checked',true)) {
        $('.check_hide').css({display:'block'});
        return false;
		}else{
		}
});

$('.check_off').click(function(){
	if($("#type-1").prop('checked',true)) {
		$('.check_hide').css({display:'none'});
        return false;
		}else{
		}
});

コード

コード
//   お問い合わせフォームチェックボタンon off動作しない js
$('.check_switch').click(function(){
	if($("#type-2").prop('checked',true)) {
        $('.check_hide').css({display:'block'});
        return false;
		}else{
            $('.check_hide').css({display:'none'});
		}
});

Comments

[m.ts10806]

>自分で試しに書いてみたのですが、うまく動作がしなくなったので

エラー等でていないか確認してください。
「うまく動かない」は他者には何も伝わらない表現なので。

[yambejp]

採用についてを選んだときだけ募集要項が表示されるということですか？
・両方選んでないときはなにも表示しない
・お問い合わせを選んだ場合は、募集要項のチェック項目をdisabledにする

という作業が必要になります

Answer 1

    <script>
        $(document).ready(function() {
            // 最初はどちらも選択されていないので隠しておく
            $('.check_hide').css({display:'none'});

            // 切り替え
            $('form [name="item1"]').change(function(){
                if ($(this).val() == "お問い合わせ") {
                    $('.check_hide').css({display:'block'});
                } else {
                    $('.check_hide').css({display:'none'});
                }
            });
        });
    </script>    

Answer 2

こんにちは。

根本的な誤解があると思います。

$("#type-2").prop('checked',true)は「#type-2にチェックをつけてjQueryオブジェクトを返す」という動作をします。
jQueryオブジェクトは真偽値に変換されると必ず真ですから、前者後者どちらのコードであってもif文が必ず成立しますので、意味がありません。

つまり、↓のコードは、

$('.check_switch').click(function(){
    if($("#type-2").prop('checked',true)) {
        $('.check_hide').css({display:'block'});
        return false;
        }else{
        }
});

$('.check_off').click(function(){
    if($("#type-1").prop('checked',true)) {
        $('.check_hide').css({display:'none'});
        return false;
        }else{
        }
});

↓のコードと等価です。

$('.check_switch').click(function(){
    $("#type-2").prop('checked',true);
    $('.check_hide').css({display:'block'});
    return false;
});

$('.check_off').click(function(){
    $("#type-1").prop('checked',true);
    $('.check_hide').css({display:'none'});
    return false;
});

これは、yesmaさんのご想定と異なるのではありませんか？

参考：

Returns: jQuery

.prop() | jQuery API Documentation

　

オブジェクトは、 [[IsHTMLDDA]] 内部スロットがある場合のみ偽値になります。このスロットは document.all にのみ存在し、 JavaScript を使用して設定することはできません。

Falsy (偽値) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

---

書き方をif文をつかって短くしたいのですが、教えていただけないでしょうか？

上記の通りですので、コードを短くする前に、まず現状のコードを正しく書き直した方がいいかと思います。

Comments

[yesma]

たくさんのご意見ありがとうございました。
自分の知識不足を痛感しましたので、もう一度勉強します。

ご指摘ありがとうございました。