回答編集履歴

1 修正

yambejp

yambejp score 62792

2017/12/06 13:39  投稿

ちょっと拡大解釈してこんな感じです
```CSS
.err{color:red;}
```
```javascript
$(function(){
 $('[type=submit]').on('click', function (e){
   var names=[];
   var f=$(this).closest('form');
   f.find('.err').remove();
   f.find('input[type=radio][required]:not(:checked)').each(function (){
     if(f.find('[name='+$(this).attr('name')+']').filter(':checked').length==0){
       names.push($(this).attr('name'));
     }
   });
   names.filter(function(x,i,self){return self.indexOf(x) === i;}).map(function(x){
     f.find('input[name='+x+']').last().closest('label').after(
      $('<div>').text(f.find('input[name='+x+']').last().data('err-txt')).addClass('err')
       );
   });
   
 });
});
```
```HTML
<form>
<div>
<label><input type="radio" name="t1" value="項目1" data-err-txt="問い合わせ項目が選択されていません" required>項目1</label>
<label><input type="radio" name="t1" value="項目2" data-err-txt="問い合わせ項目が選択されていません" required>項目2</label>
</div>
<div>
<label><input type="radio" name="t2" value="項目3" data-err-txt="問い合わせ項目が選択されていません" required>項目3</label>
<label><input type="radio" name="t2" value="項目4" data-err-txt="問い合わせ項目が選択されていません" required>項目4</label>
</div>
<input type="submit" value="送信">
</form>
<form>
<div>
<label><input type="radio" name="t3" value="項目5" data-err-txt="問い合わせ項目が選択されていません" required>項目5</label>
<label><input type="radio" name="t3" value="項目6" data-err-txt="問い合わせ項目が選択されていません" required>項目6</label>
<!-- フォームが違えば同じnameでもOK -->
<label><input type="radio" name="t1" value="項目5" data-err-txt="問い合わせ項目が選択されていません" required>項目5</label>
<label><input type="radio" name="t1" value="項目6" data-err-txt="問い合わせ項目が選択されていません" required>項目6</label>
</div>
<input type="submit" value="送信">
</form>
```
※ただしラジオボタンの同じnameの要素が必ずしも並んで存在するとはかぎらないので
場合によっては見た目がおかしくなると思います

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る