こんにちは。いつもありがとうございます。
jQueryを使い複数あるラジオボタンのグループのそれぞれ１番目を自動的にチェックするプログラムを組もうとしているのですが、いまいちどうすればいいのかわからず質問させていただきました。

下のようにHTMLがあり、ulでグループ分けされたli内のinputの全グループの一番最初だけにチェックを入れるにはどうすれば良いですか＿

html
1<ul class="form-list">
2<li><input type="radio"></li>
3<li><input type="radio"></li>
4<li><input type="radio"></li>
5<li><input type="radio"></li>
6</ul>
7<ul class="form-list">
8<li><input type="radio"></li>
9<li><input type="radio"></li>
10<li><input type="radio"></li>
11<li><input type="radio"></li>
12</ul>
13<ul class="form-list">
14<li><input type="radio"></li>
15<li><input type="radio"></li>
16<li><input type="radio"></li>
17<li><input type="radio"></li>
18</ul>

下のコードではすべてのグループの中の一番最初のラジオボタンだけにチェックが入ってしまいます。。。

javascript
1$(function(){
2	$(".form-list").each(function(){
3		$("li input[type=radio]:eq(0)").prop("checked", true);//eq(x) indicate a order of radio box
4	})
5});

どうかご教授願います。

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

回答3件

ベストアンサー

おなじnameを指定してグルーピングしないとラジオボタンとして
なんの体もなしていないと思いますがダイジョブですか？

ソース追記

javascript
1$(function(){
2    $("ul.form-list").each(function(){
3        $("li:first-child input[type=radio]").prop("checked", true);
4    })
5});

修正

よくよく考えたらeachいらない？

javascript
1$(function(){
2    $("ul.form-list li:first-child input[type=radio]").prop("checked", true);
3});

ただし、最初のliにかならずラジオボタンがあるとは限らないので調整が必要？

投稿2016/07/19 09:04

編集2016/07/19 09:32

yambejp

総合スコア114839

Tats.N

2016/07/21 02:12

ありがとうございました。実はそれぞれのul > liに違う処理をさせたかったのでeachが必要だったのですが、やり方がよくわからず質問させていただきました。ですので最初のコードの方を使わせていただきました。どうもありがとうございます。

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

html
1<!DOCTYPE HTML>
2<html lang="en-US">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<ul class="form-list">
9			<li><input type="radio" name="group01"></li>
10			<li><input type="radio" name="group01"></li>
11			<li><input type="radio" name="group01"></li>
12			<li><input type="radio" name="group01"></li>
13		</ul>
14		<ul class="form-list">
15			<li><input type="radio" name="group02"></li>
16			<li><input type="radio" name="group02"></li>
17			<li><input type="radio" name="group02"></li>
18			<li><input type="radio" name="group02"></li>
19		</ul>
20		<ul class="form-list">
21			<li><input type="radio" name="group03"></li>
22			<li><input type="radio" name="group03"></li>
23			<li><input type="radio" name="group03"></li>
24			<li><input type="radio" name="group03"></li>
25		</ul>
26		<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
27		<script type="text/javascript">
28			$(function () {
29				$(".form-list").each(function () {
30					$(this).find(':radio:first').prop("checked", true);
31				});
32			});
33		</script>
34	</body>
35</html>

投稿2016/07/19 09:23

退会済みユーザー

総合スコア0

Tats.N

2016/07/21 02:13

ありがとうございました！参考にさせていただきます。

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

先ほどの取り消し。

javascript
1$(".form-list").each(function(){
2  $(this).children("li:first").children("input").prop("checked",true);
3});
4```かな？
5
6追記
7---
8eachなしで。
9```javascript
10$(".form-list").children("li:first-child").children("input").prop("checked",true);