teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ラジオボタン向けのコードをチェックボックスで使用したい

編集履歴

質問編集履歴

9

html出力を追記

2019/02/19 13:57

投稿

bigcat
bigcat

スコア24

title CHANGED
File without changes
body CHANGED
@@ -86,4 +86,11 @@
86
86
  }
87
87
  }).trigger('change');
88
88
  });
89
+ ```
90
+ ▼html出力
91
+ ```html
92
+ <label for="pickup-1">
93
+ <input type="checkbox" name="pickup[data][]" value="1" id="pickup-1">
94
+ <span class="mwform-checkbox-field-text">必要</span>
95
+ </label>
89
96
  ```

8

更新がうまくいかず再度更新

2019/02/19 13:57

投稿

bigcat
bigcat

スコア24

title CHANGED
File without changes
body CHANGED
@@ -80,7 +80,7 @@
80
80
  $(".pickup-op").hide();
81
81
  if ($(input:checkbox[name='pickup']).prop('checked').val() == "1"){
82
82
  $('.pickup-op').show();
83
- } else if($(input:checkbox[name='pickup']).prop('checked').val() == "2") {
83
+ } else($(input:checkbox[name='pickup']).prop('checked').val() == "2") {
84
84
  $("input[name='pickupDate']").val("");
85
85
  $("select[name='pickupTime']").val("0");
86
86
  }

7

追記

2019/02/19 12:11

投稿

bigcat
bigcat

スコア24

title CHANGED
File without changes
body CHANGED
@@ -62,7 +62,7 @@
62
62
  〜 略 〜
63
63
  <tr>
64
64
  <th>集荷手配</th>
65
- <td>[mwform_radio name="pickup" id="pickup" value="2" children="1:必要,2:不要"]</td>
65
+ <td>[mwform_checkbox name="pickup" id="pickup" value="2" children="1:必要,2:不要"]</td>
66
66
  </tr>
67
67
  <tr class="pickup-op">
68
68
  <th>集荷希望日</th>
@@ -76,11 +76,11 @@
76
76
  ```
77
77
  ```jquery
78
78
  jQuery(function($) {
79
- $('[name="pickup"]:radio').change(function() {
79
+ $('[name="pickup"]:checkbox').change(function() {
80
80
  $(".pickup-op").hide();
81
- if ($("input:radio[name='pickup']:checked").val() == "1") {
81
+ if ($(input:checkbox[name='pickup']).prop('checked').val() == "1"){
82
82
  $('.pickup-op').show();
83
- } else($("input:radio[name='pickup']:checked").val() == "2") {
83
+ } else if($(input:checkbox[name='pickup']).prop('checked').val() == "2") {
84
84
  $("input[name='pickupDate']").val("");
85
85
  $("select[name='pickupTime']").val("0");
86
86
  }

6

追記

2019/02/19 12:10

投稿

bigcat
bigcat

スコア24

title CHANGED
File without changes
body CHANGED
@@ -76,11 +76,11 @@
76
76
  ```
77
77
  ```jquery
78
78
  jQuery(function($) {
79
- $('[name="pickup"]:checkbox').change(function() {
79
+ $('[name="pickup"]:radio').change(function() {
80
80
  $(".pickup-op").hide();
81
- if ($(input:checkbox[name='pickup']).prop('checked').val() == "1"){
81
+ if ($("input:radio[name='pickup']:checked").val() == "1") {
82
82
  $('.pickup-op').show();
83
- } else($(input:checkbox[name='pickup']).prop('checked').val() == "2") {
83
+ } else($("input:radio[name='pickup']:checked").val() == "2") {
84
84
  $("input[name='pickupDate']").val("");
85
85
  $("select[name='pickupTime']").val("0");
86
86
  }

5

else if　→　else

2019/02/19 12:09

投稿

bigcat
bigcat

スコア24

title CHANGED
File without changes
body CHANGED
@@ -42,7 +42,7 @@
42
42
  〜 略 〜
43
43
  ```
44
44
 
45
- ※追加【修正したコード】
45
+ ※追加【修正したコード１】
46
46
  ```ここに言語を入力
47
47
  jQuery(function($) {
48
48
  $('[name="pickup"]:checkbox').change(function() {
@@ -55,4 +55,35 @@
55
55
  }
56
56
  }).trigger('change');
57
57
  });
58
+ ```
59
+ ※再追加【修正したコード２】
60
+ ```html
61
+
62
+ 〜 略 〜
63
+ <tr>
64
+ <th>集荷手配</th>
65
+ <td>[mwform_radio name="pickup" id="pickup" value="2" children="1:必要,2:不要"]</td>
66
+ </tr>
67
+ <tr class="pickup-op">
68
+ <th>集荷希望日</th>
69
+ <td>[mwform_datepicker name="pickupDate" id="pickupDate" js="minDate:3" placeholder="申込日より３日以降で指定できます。"]</td>
70
+ </tr>
71
+ <tr class="pickup-op">
72
+ <th>集荷希望時間</th>
73
+ <td>[mwform_select name="pickupTime" id="pickupTime" children="0:指定なし,1:〜13:00,2:14:00〜16:00,3:16:00〜18:00,4:18:00〜21:00"]</td>
74
+ </tr>
75
+ 〜 略 〜
76
+ ```
77
+ ```jquery
78
+ jQuery(function($) {
79
+ $('[name="pickup"]:checkbox').change(function() {
80
+ $(".pickup-op").hide();
81
+ if ($(input:checkbox[name='pickup']).prop('checked').val() == "1"){
82
+ $('.pickup-op').show();
83
+ } else($(input:checkbox[name='pickup']).prop('checked').val() == "2") {
84
+ $("input[name='pickupDate']").val("");
85
+ $("select[name='pickupTime']").val("0");
86
+ }
87
+ }).trigger('change');
88
+ });
58
89
  ```

4

修正したコードを追加

2019/02/19 12:08

投稿

bigcat
bigcat

スコア24

title CHANGED
File without changes
body CHANGED
@@ -40,4 +40,19 @@
40
40
  <td>[mwform_select name="pickupTime" id="pickupTime" children="0:指定なし,1:〜13:00,2:14:00〜16:00,3:16:00〜18:00,4:18:00〜21:00"]</td>
41
41
  </tr>
42
42
  〜 略 〜
43
+ ```
44
+
45
+ ※追加【修正したコード】
46
+ ```ここに言語を入力
47
+ jQuery(function($) {
48
+ $('[name="pickup"]:checkbox').change(function() {
49
+ $(".pickup-op").hide();
50
+ if ($(input:checkbox[name='pickup']).prop('checked').val() == "1"){
51
+ $('.pickup-op').show();
52
+ } else if($(input:checkbox[name='pickup']).prop('checked').val() == "2") {
53
+ $("input[name='pickupDate']").val("");
54
+ $("select[name='pickupTime']").val("0");
55
+ }
56
+ }).trigger('change');
57
+ });
43
58
  ```

3

文章の分かりにくい部分を修正

2019/02/19 01:00

投稿

bigcat
bigcat

スコア24

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,7 @@
1
1
  ### 前提・実現したいこと
2
2
  ワードプレスでの**mw wp form**を使った入力フォームについてです。
3
- jqueryを使ってチェックボックスの特定要素をチェックで、別の入力項目を開閉させたいと希望しており、ラジオボタンをつかった参考事例を、チェックボックスで使いたいです。
3
+ jqueryを使ってチェックボックスの特定要素のチェックで、テキストや別の入力項目を開閉させたいです。
4
+ 参考事例があたのですが、ラジオボタン用だったので、チェックボックス用にコードを変更する方法をご教示いただきたいです。
4
5
 
5
6
  ### 試したこと
6
7
  以下の参考サイトでラジオボタンを使った参考事例があったので、このコード（jquery,html)のradioをcheckboxに置き換えて試してみましたが動きません。[サイトはこちら](https://works.coldsleep.jp/blog/form-option/)
@@ -8,8 +9,6 @@
8
9
 
9
10
 
10
11
  ### ラジオボタン用のコード（これをチェックボックスで使いたい）
11
- 以下のラジオボタンのよるコードをチェックボックスで使えるよう、どなたかご教示いただけませんでしょうか。
12
-
13
12
  ```jQuery
14
13
  jQuery(function($) {
15
14
  $('[name="pickup"]:radio').change(function() {

2

テキストの補足

2019/01/01 06:46

投稿

bigcat
bigcat

スコア24

title CHANGED
File without changes
body CHANGED
@@ -3,7 +3,7 @@
3
3
  jqueryを使ってチェックボックスの特定要素をチェックで、別の入力項目を開閉させたいと希望しており、ラジオボタンをつかった参考事例を、チェックボックスで使いたいです。
4
4
 
5
5
  ### 試したこと
6
- 以下の参考サイトでラジオボタンを使った参考事例があったので、このコードのradioをcheckboxに置き換えて試してみましたが動きません。[サイトはこちら](https://works.coldsleep.jp/blog/form-option/)
6
+ 以下の参考サイトでラジオボタンを使った参考事例があったので、このコード（jquery,html)のradioをcheckboxに置き換えて試してみましたが動きません。[サイトはこちら](https://works.coldsleep.jp/blog/form-option/)
7
7
  元のradioでは動くので、checkboxは同じ記述方法ではだめだと思いました。自力でコードが書けないので、同様の事例を探しましたが、見付けることができませんでした。
8
8
 
9
9
 

1

見出し等を補足した

2019/01/01 06:42

投稿

bigcat
bigcat

スコア24

title CHANGED
File without changes
body CHANGED
@@ -1,12 +1,15 @@
1
+ ### 前提・実現したいこと
1
2
  ワードプレスでの**mw wp form**を使った入力フォームについてです。
3
+ jqueryを使ってチェックボックスの特定要素をチェックで、別の入力項目を開閉させたいと希望しており、ラジオボタンをつかった参考事例を、チェックボックスで使いたいです。
2
4
 
3
- jqueryを使ってチェックボックスの特定要素をチェックで、別の入力項目を開閉させる
5
+ ### 試したこと
4
- 以下のるサイトでラジオボタンを使った参考事例があったので、このコードのradioをcheckboxに置き換えて試してみましたが動きません。[サイトはこちら](https://works.coldsleep.jp/blog/form-option/)
6
+ 以下の参考サイトでラジオボタンを使った参考事例があったので、このコードのradioをcheckboxに置き換えて試してみましたが動きません。[サイトはこちら](https://works.coldsleep.jp/blog/form-option/)
5
7
  元のradioでは動くので、checkboxは同じ記述方法ではだめだと思いました。自力でコードが書けないので、同様の事例を探しましたが、見付けることができませんでした。
6
8
 
7
- 以下の**ラジオボタンのよるコードをチェックボックスで使えるようにしたい**のですが、どなたかご教示いただけませんでしょうか。
8
9
 
9
- ●ラジオボタンによるコード
10
+ ### ラジオボタン用のコード（これをチェックボックスで使いたい）
11
+ 以下のラジオボタンのよるコードをチェックボックスで使えるよう、どなたかご教示いただけませんでしょうか。
12
+
10
13
  ```jQuery
11
14
  jQuery(function($) {
12
15
  $('[name="pickup"]:radio').change(function() {