JavaScript：チェックチェックで表示・非表示

###前提・実現したいこと
JavaScriptでチェックボックスで表示・非表示を実現したいのですが、上手く行きません。
フォームで使用します。

デフォルトは非表示にしていて、チェックボックスをONにすると新たに表示されるようにしたいです。

###発生している問題・エラーメッセージ

デフォルトでの非表示はできてますが、ＯＮにした後にOFFにすると表示されたままになります。

###該当のソースコード
HTML

		<div class="form-group">
			<label class="col-sm-4 control-label">お届け先が異なる場合</label>
			<div class="col-sm-7">
				<div>
					<label class="checkbox-inline"><input type="checkbox" name="deliver_checkbox" value="その他" class="deliver_checkbox" <?php if($this->session->deliver_checkbox == 'その他') print('checked="checked"') ?>>その他</label>
				</div>
			</div>
		</div>
		<div id="deliver_flg">
			<div class="form-group">
				<label class="col-sm-4 control-label">氏名</label>
				<div class="col-sm-7">
					<input type="text" name="deliver_name" id="deliver_name" class="form-control" value="" />
				</div>
			</div>
		</div>

JavaScript

$(function() {
	$("#deliver_flg").hide();
	var other = $('input[name="deliver_checkbox"]:checked').val();
	deliver_checkbox(other);
	$(".deliver_checkbox").change(function(){
		deliver_checkbox($(this).val());
	});
});
function deliver_checkbox(value) {
	$("#deliver_flg").hide();
	if( value == "その他" ){
		$("#deliver_flg").fadeIn(500);
	}else {
    $("#deliver_flg").fadeOut(500);
	}
}

###補足情報(言語/FW/ツール等のバージョンなど)
他の人が作ったコードを参考にしてますが上手く行きません。
JavaScriptは素人です。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

的外れかもしれませんが、以下のように行ってみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
7</head>
8<body>
9<div class="form-group">
10    <label class="col-sm-4 control-label">
11        お届け先が異なる場合
12    </label>
13    <div class="col-sm-7">
14        <div>
15            <label class="checkbox-inline">
16                <input type="checkbox" name="deliver_checkbox" value="その他" class="deliver_checkbox">
17                その他
18            </label>
19        </div>
20    </div>
21</div>
22<div id="deliver_flg">
23    <div class="form-group">
24        <label class="col-sm-4 control-label">
25            氏名
26        </label>
27        <div class="col-sm-7">
28            <input type="text" name="deliver_name" id="deliver_name" class="form-control">
29        </div>
30    </div>
31</div>
32<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
33<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
34<script>
35    $(function () {
36        if ($(".deliver_checkbox").prop("checked")) {
37            $(".deliver_checkbox").prop("checked", false);
38        }
39        $("#deliver_flg").hide();
40
41        $(".deliver_checkbox").change(function () {
42            deliver_checkbox($(this).prop("checked"));
43        });
44    });
45
46    function deliver_checkbox(ischecked) {
47        ischecked ? $("#deliver_flg").fadeIn(500) : $("#deliver_flg").fadeOut(500);
48    }
49</script>
50</body>
51</html>