【jquery】jquery/javascriptを使ってformのラジオボックス(input[type=radio])の入力チックを作ろう！

フォーム(form)の値を取得する場合、jQueryではval()メソッドやprop()メソッドを使います。

HTML

<form id="mailform" name="mailform" method="post" accept-charset="UTF-8">
<ul>
<li><input type="radio" name="radio(必須)" id="aaa_id" size="40" class="mfp" value="aaa" />aaa</li>
<li><input type="radio" name="radio(必須)" id="bbb_id" size="40" class="mfp" value="bbb" />bbb</li>
</ul>
<div id="errer_radio(必須)" class="mfs_errer"></div>

<ul>
<li><input type="radio" name="radio2" id="ccc_id" size="40" class="mfp" value="ccc" />ccc</li>
<li><input type="radio" name="radio2" id="ddd_id" size="40" class="mfp" value="ddd" />ddd</li>
</ul>
/*こっちは必須なし*/

<input type="button" value="submit" onClick="check(this.form)">
</form>

CSS

.mfs_errer{
	color: #C00;
}

jquery/javascript

function check(){
	var valary = $('#mailform input[type=radio][name$="(必須)"]');
	var flg_name = "";
	jQuery.each(valary, function() {
		var name = $(this).attr("name");
		if(name !== flg_name){
			flg_name = name;
			var value = $('#mailform input[type=radio][name="'+name+'"]:checked').val();
			if(!value)
			$('#errer_' + replaceKakko(name)).text(removeHissu(name) + 'が選択されていません');
			else
			$('#errer_' + replaceKakko(name)).text('');
		}
	});
	
}
//
function replaceKakko(str){
	str = str.replace('(','\\(');
	str = str.replace(')','\\)');
	return str;
}

function removeHissu(str){
	return str.substr(0,str.indexOf('(必須)'));
}

jqueryでname要素を指定して取得するとcheckされていない要素も引き込んできます。

radio(aaaの要素)
radio(bbbの要素)
radio2(cccの要素)
radio2(dddの要素)

こんな感じで引き込んできています。配列を連想するといいかもしれません。今の要素と前の要素と比較してnameが違ってたらそのname要素のcheckedされてる要素があるか調べます。

replaceKakkoメソッドは”()”がHTMLのid指定にそのまま使えないから取得できるようにリプレイスしています。
参考：jQueryのID指定に使える記号｜社内ITゲリラがWebで世界をめざす
removeHissuメソッドは'(必須)’を取り除くための処理です。

Related articles