JavaScriptで法人名を表示・非表示にしたい

###前提・実現したいこと
フォームで法人名を入力する欄をチェックボックスで表示・非表示にしたいがうまくいきません。

###html

		<div>
			<label>団体・法人</label>
			<div>
				<div>
					<label class="checkbox"><input type="checkbox" name="order_company_type" class="order_company_type" value="法人" />団体・法人はチェックを入れてください</label>
				</div>
			</div>
		</div>
<div id="order_company_other">
		<div id="order_company">
			<label>法人名</label>
			<div>
				<input type="text" name="order_company" value="">
			</div>
		</div>
		<div id="order_division">
			<label>所属部署</label>
			<div>
				<input type="text" name="order_division" value="">
			</div>
		</div>
</div>

###JavaScript

$(function() {
	$("#order_company_other").hide();
	var other = $('input[name="order_company_type"]:checked').val();
	order_company_type(other);
	$(".order_company_type").change(function(){
		order_company_type($(this).val());
	});
});

function order_company_type(value) {
	$("#order_company_other").hide();
	if( value == "法人" ){
		$("#order_company_other").fadeIn(500);
	} else {
		$("#order_company_other").hide();
	}
}

###補足情報
JavaScriptは初心者でよくわからず、ネットにあるのをコピーして変更を加えました。

上記のコードでは法人情報をデフォルトで非表示にして、チェックボックスにチェックを入れると法人情報が表示されるようになります。

ここまでは上手くいってますが、チェックを外すと法人情報を非表示になってほしいのですが、なりません。

ご教授よろしくお願いします。

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

回答3件

ベストアンサー

もっとシンプルにできそうです。
こんな感じでどうでしょうか。
動くサンプル

投稿2016/08/09 08:20

NatsumiOki

総合スコア1298

ziyuu

2016/08/09 08:44

凄く早い、回答有り難うございます。出来ました。

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

さらにさらにシンプルに。script部分は4行で実装可能です。

javascript
1$('#order_company_other').hide()
2$('.order_company_type').click(function(){
3    $('#order_company_other').toggle();
4});

初心者とのことですので念のため・・・

jQueryを利用しているためjQueryの読込が必要になります。

html
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

↑これを<head>タグ内もしくは<body>タグ内などに入れて置かないとエラーになります。

投稿2016/08/09 08:37

maru0014

総合スコア151

ziyuu

2016/08/09 08:47

回答有り難うございます。 jQueryは読み込んでいますが、私の設置の仕方が悪かったのか、上手く動かずかたじけない。

attercop

2016/08/09 09:33

IE11でダブルクリックされると動作が逆転してしまうので、チェックボックスのクリックイベントでcheckedプロパティを確認せず、toggleで表示/非表示を切り替えるのはやめた方がよいと思います。 IE11では、未選択状態のチェックボックスをダブルクリックすると、クリックイベントは２回発生しますが、チェックボックスは選択状態になります。 IE11の実装がどうかと思いますが・・

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

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<form action="" method="post">
9			<div>
10				<label>団体・法人</label>
11				<div>
12					<div>
13						<label class="checkbox">
14							<input type="checkbox" name="order_company_type" id="order_company_type" value="1" />団体・法人はチェックを入れてください
15						</label>
16					</div>
17				</div>
18			</div>
19			<div id="order_company_other">
20				<div id="order_company">
21					<label>法人名</label>
22					<div>
23						<input type="text" name="order_company" value="">
24					</div>
25				</div>
26				<div id="order_division">
27					<label>所属部署</label>
28					<div>
29						<input type="text" name="order_division" value="">
30					</div>
31				</div>
32			</div>
33		</form>
34		<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
35		<script type="text/javascript">
36			$(function () {
37				$('#order_company_type').on('change', function () {
38					if ($(this).prop('checked')) {
39						$("#order_company_other").show();
40					} else {
41						$("#order_company_other").hide();
42					}
43				}).change();
44			});
45		</script>
46	</body>
47</html>