teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップjQueryに関する質問【jQuery】モーダルにチェックボックスの選択内容をかいたり、未選択状態を出したい

編集履歴

質問編集履歴

5

問題点の強調

2023/09/11 16:02

投稿

meiriairia
meiriairia

スコア2

test CHANGED
File without changes
test CHANGED
@@ -91,8 +91,9 @@
91
91
 
92
92
  });
93
93
 
94
- <!-- ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊多分問題点ここ＊＊＊＊＊＊＊＊＊＊＊＊＊ -->
94
+ <!-- ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊多分問題点ここ＊＊＊＊＊＊＊＊＊＊＊＊＊ -->
95
+
95
- ** $("#btn").click(function () {
96
+ $("#btn").click(function () {
96
97
  if ($('[name="select"]').prop("checked")) {
97
98
  $("#cb").text(cbtxt);
98
99
  } else {
@@ -100,7 +101,7 @@
100
101
  }
101
102
  });
102
103
 
103
- **
104
+
104
105
 
105
106
  </script>
106
107
 
jQuery

4

問題点の強調

2023/09/11 16:02

投稿

meiriairia
meiriairia

スコア2

test CHANGED
File without changes
test CHANGED
@@ -91,8 +91,8 @@
91
91
 
92
92
  });
93
93
 
94
-
94
+ <!-- ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊多分問題点ここ＊＊＊＊＊＊＊＊＊＊＊＊＊ -->
95
- $("#btn").click(function () {
95
+ ** $("#btn").click(function () {
96
96
  if ($('[name="select"]').prop("checked")) {
97
97
  $("#cb").text(cbtxt);
98
98
  } else {
@@ -100,7 +100,7 @@
100
100
  }
101
101
  });
102
102
 
103
-
103
+ **
104
104
 
105
105
  </script>
106
106
 
jQuery

3

先の質問について自分で解決できたため、もっと細かな質問しました

2023/09/11 15:52

投稿

meiriairia
meiriairia

スコア2

test CHANGED
File without changes
test CHANGED
@@ -13,27 +13,12 @@
13
13
  選んだチェックの内容とそれを送信するボタン付きのモーダルで出したい
14
14
 
15
15
 
16
- 現在、この２つをつなぐjqueryの作り方がわかりません
16
+ ご教授いただけると幸いです
17
17
 
18
18
 
19
- 未選択の場合は.cb-noneの文言で
19
+ **＜追記の問題点＞**
20
- 選択中の場合は.cb-ari (選択内容)　を表示みたいにしたい
20
+ 選択中のとき、あ　以外の選択肢が表示されない（推測できる原因：.eachをどこに入れるかわからない）
21
21
 
22
-
23
- ↓こういうのを使うのかもしれないと書いてみたはものの
24
- 組み込み方が分からず、、
25
- var cbname = $(this).attr("value");
26
- $(".cb-ari").text(cbname);
27
-
28
- しっちゃかめっちゃかな文章で申し訳ありませんが、ご教授いただけると幸いです
29
-
30
-
31
- ＜追記＞
32
-
33
- 現在何回も選択肢を押すと、あ、い、うの3択しか無いのにあ、あ、あ、あ、い、い、う
34
- のように選択解除しても外れてない状態です
35
-
36
- ここも教えていただきたいです
37
22
 
38
23
  ```ここに言語名を入力
39
24
  <!-- ボタン -->
@@ -71,10 +56,7 @@
71
56
  <!-- close btn -->
72
57
  </span>
73
58
  <div class="modal-content">
74
- <div class="cb-none">
59
+ <div class="cb" id="cb">
75
- 　　　　　　　選択できてません
76
- </div>
77
- <div class="cb-ari">
78
60
  </div>
79
61
 
80
62
 
@@ -85,13 +67,17 @@
85
67
 
86
68
 
87
69
 
88
- <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
70
+ <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
71
+
89
72
  <script>
90
73
 
91
74
  var close = $('.modal-close');
92
75
  var container = $('.modal-container');
93
76
  var cbname = [];
94
-
77
+ var cbtxt = $('[name="select"]').val();
78
+
79
+
80
+
95
81
  $("#btn").click(function () {
96
82
  container.addClass('active');
97
83
 
@@ -104,17 +90,18 @@
104
90
  });
105
91
 
106
92
  });
107
-
93
+
94
+
108
- $(function(){
95
+ $("#btn").click(function () {
109
- $('[name="select"]').change(function(){
96
+ if ($('[name="select"]').prop("checked")) {
97
+ $("#cb").text(cbtxt);
98
+ } else {
99
+ $("#cb").text("選択してください");
100
+ }
101
+ });
102
+
110
103
 
111
- $('[name="select"]:checked').each(function(index, element){
104
+
112
- cbname.push($(element).val());
113
- });
114
- $('.modal-content').html(cbname.join(','));
115
- });
116
- });
117
-
118
105
  </script>
119
106
 
120
107
 
jQuery

2

改行

2023/09/11 12:41

投稿

meiriairia
meiriairia

スコア2

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,10 @@
12
12
 
13
13
  選んだチェックの内容とそれを送信するボタン付きのモーダルで出したい
14
14
 
15
+
15
16
  現在、この２つをつなぐjqueryの作り方がわかりません
17
+
18
+
16
19
  未選択の場合は.cb-noneの文言で
17
20
  選択中の場合は.cb-ari (選択内容)　を表示みたいにしたい
18
21
 
@@ -23,9 +26,13 @@
23
26
  $(".cb-ari").text(cbname);
24
27
 
25
28
  しっちゃかめっちゃかな文章で申し訳ありませんが、ご教授いただけると幸いです
29
+
30
+
26
31
  ＜追記＞
32
+
27
33
  現在何回も選択肢を押すと、あ、い、うの3択しか無いのにあ、あ、あ、あ、い、い、う
28
34
  のように選択解除しても外れてない状態です
35
+
29
36
  ここも教えていただきたいです
30
37
 
31
38
  ```ここに言語名を入力
jQuery

1

追加のおかしな点

2023/09/11 12:30

投稿

meiriairia
meiriairia

スコア2

test CHANGED
File without changes
test CHANGED
@@ -23,7 +23,10 @@
23
23
  $(".cb-ari").text(cbname);
24
24
 
25
25
  しっちゃかめっちゃかな文章で申し訳ありませんが、ご教授いただけると幸いです
26
-
26
+ ＜追記＞
27
+ 現在何回も選択肢を押すと、あ、い、うの3択しか無いのにあ、あ、あ、あ、い、い、う
28
+ のように選択解除しても外れてない状態です
29
+ ここも教えていただきたいです
27
30
 
28
31
  ```ここに言語名を入力
29
32
  <!-- ボタン -->
jQuery