Q&A
チェックボックスが必須項目という場合、チェックしないという選択肢はないという仕様だと考えてよいですか？
前提・実現したいこと
ここのサイト
https://design-tera.com/blog/archives/2993/
を参考にして、お問い合わせフォームの必須項目の残数を表示したいと考えていました。
class="rq"のついた項目を必須項目として、必須項目の数をカウントできるのが便利だなと思っていました。
（フォームには必須ではないtextareaの入力もあるため、必須と任意の住み分けをclass="rq"の有無で設定できる点が好都合でした。）
フォームの設問上、type="checkbox"にて複数選択可能な「お問い合わせ種類」というのを設問で用意したいのですが、
この項目を必須にした場合に、残数を表示させるにはどうしたら良いでしょうか？
発生している問題
冒頭の参考サイトのように、<input type="checkbox">にclass="rq"を設定しても、意図したようには実装できなかったのですが、なにか良い方法はありますでしょうか？
該当のソースコード
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題/title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ $(function(){ var items = $("form").find('.rq').length; $(".items").html(items); var i = 0; $(".number").html(items - i); $("form").find('.rq').change(function() { calc(); }); $("form").find('.rq').keyup(function() { calc(); }); var calc = function() { i = 0; $("form").find('.rq').each(function() { if($(this).val() !== "") { i++; } }); $(".number").html(items - i); }; }); }); </script> </head> <body> <div class="form_inner"> <form method="post" action=""> <div class="remaining"><p>残りの入力項目<br><span class="number"></span> / <span class="items"></span></p></div> <div class="form_test"> <table> <tr> <th> お問い合わせ種類<span class="required">必須</span> </th> <td> <label><input name="お問い合わせ種類" value="見積り請求" type="checkbox" class="rq">見積り請求</label><br> <label><input name="お問い合わせ種類" value="カタログ請求" type="checkbox" class="rq">カタログ請求</label><br> <label><input name="お問い合わせ種類" value="製品・サービスに関するお問い合せ" type="checkbox" class="rq">製品・サービスに関するお問い合せ</label> </td> </tr> <tr> <th> 氏名<span class="required">必須</span> </th> <td> <input name="氏名" value="" type="text" class="rq"> </td> </tr> <tr> <th> <h2>お問い合わせ内容</h2> </th> <td> <textarea type="text" name="" /></textarea> </td> </tr> </table> </div> </form> </div> </body> </html>
はい、チェックしないという選択肢は「ない」という仕様で大丈夫です。
javascriptも載せた方がよかです
すみません、、おっしゃる通りですね。初心者ですみません。
こちらでした。。
<script type="text/javascript">
jQuery(function($){
$(function(){
var items = $("form").find('.rq').length;
$(".items").html(items);
var i = 0;
$(".number").html(items - i);
$("form").find('.rq').change(function() {
calc();
});
$("form").find('.rq').keyup(function() {
calc();
});
var calc = function() {
i = 0;
$("form").find('.rq').each(function() {
if($(this).val() !== "") {
i++;
}
});
$(".number").html(items - i);
};
});
});
</script>
み、みづらい・・・質問文編集して載せてくれたらとりあえずみてみようかな
あと脳死プレイでいくとセレクトボックスにかえたらそれで済みそうな気が
使い方分かっておらず、本当にアホですみません。質問文の編集をしました。おっしゃる通りセレクトボックスに変えるのも1案ですが、複数選択できるという意味でcheckboxの方が適しておりまして、、。
＞ チェックしないという選択肢は「ない」
同じnameでも全部にチェックをするのか
同じnameなら1つでもチェックされればいいのか
という意味だったのですが、rqがついたら全部チェックされていないといけないなら
:checkebox.rq:not(:checked)を数えるだけです
＞複数選択できる
selectにも一応「multiple」という属性があります。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/select
※もちろんチェックボックスにはチェックボックスの利点があるのでこの限りではないですが
回答2件
0
ベストアンサー
HTML結構壊れてる箇所があるのでなおしてもらうとして（構文チェックもしてくれるエディタ利用されたほうが良いです）
<title>無題/title> ↓ <title>無題</title> <textarea type="text" name="" /></textarea> ↓ <textarea type="text" name="" ></textarea>
「チェックボックス」「ラジオボタン」については同名で複数設置が可能なのでもう少し別のルール付けをしたほうがいいかもしれません。
「別タグで囲う」とか。
html
1 <div class="rq"> 2 <label><input name="お問い合わせ種類" value="見積り請求" type="checkbox">見積り請求</label><br> 3 <label><input name="お問い合わせ種類" value="カタログ請求" type="checkbox">カタログ請求</label><br> 4 <label><input name="お問い合わせ種類" value="製品・サービスに関するお問い合せ" type="checkbox">製品・サービスに関するお問い合せ</label> 5 </div>
※calc内のみ
js
1 var calc = function() { 2 i = 0; 3 $("form").find('.rq').each(function() { 4 if($(this).prop("tagName") == "DIV"){ 5 $(this).find('input').each(function() { 6 if($(this).prop("checked")){ 7 i++; 8 return false; 9 } 10 }); 11 }else{ 12 if ($(this).val() !== "") { 13 i++; 14 } 15 } 16 }); 17 $(".number").html(items - i); 18 };
投稿2019/07/17 08:22
総合スコア80888
0
ざっくり・・・
javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 $('input').on('input',function(){ 5 var rq=0; 6 var rest=0; 7 var len1=$.unique($(':checkbox.rq').map(function(){ 8 return $(this).attr('name'); 9 })).length; 10 var len2=$.unique($(':checkbox:checked.rq').map(function(){ 11 return $(this).attr('name'); 12 })).length; 13 rq+=$(':text.rq').length; 14 rq+=len1; 15 rest+=$(':text.rq').filter(function(){ 16 return $(this).val()==""; 17 }).length; 18 rest+=len1-len2; 19 $('.number').text(rest); 20 $('.items').text(rq); 21 }).eq(0).trigger('input'); 22}); 23</script> 24<form method="post"> 25<div class="remaining"><p>残りの入力項目<br><span class="number"></span> / <span class="items"></span></p></div> 26<div class="form_test"> 27 28<h2>c1</h2> 29<label><input name="c1" value="aaa" type="checkbox" class="rq">aaa</label><br> 30<label><input name="c1" value="bbb" type="checkbox" class="rq">bbb</label><br> 31<label><input name="c1" value="ccc" type="checkbox" class="rq">ccc</label><br> 32<h2>c2</h2> 33<label><input name="c2" value="ddd" type="checkbox" class="rq">ddd</label><br> 34<label><input name="c2" value="eee" type="checkbox" class="rq">eee</label><br> 35<h2>c3</h2> 36<label><input name="c3" value="fff" type="checkbox" class="rq">fff</label><br> 37<h2>t1-3</h2> 38<span class="required">必須</span><input name="t1" value="" type="text" class="rq"><br> 39<span class="required">必須</span><input name="t2" value="" type="text" class="rq"><br> 40<span class="required">必須</span><input name="t3" value="" type="text" class="rq"><br> 41<h2>お問い合わせ内容</h2> 42<textarea type="text" name="" /></textarea><br> 43</form>
投稿2019/07/17 08:09
編集2019/07/17 08:30総合スコア117682
あなたの回答
tips
プレビュー
