質問編集履歴

3 追記しました。

may88seiji

may88seiji score 77

2016/09/27 19:44  投稿

複数のチェックボックスの値を取得 書き換え
###前提
チェックボックスの値を編集して書き換える機能をつくっています。
![イメージ説明](c75e39411e106cacb2623b4cf7f79f97.png)
###実現したいこと
複数のチェックボックスの選択を変更して保存 現在の表示を変更したスポーツ名に書き換える
###試したこと
下記コードでひとつだけスポーツの書き換えができています。
(複数選択しても最初のひとつだけ反映される)
コメントアウトの行は複数用に試みましたがエラーになります。
複数のチェックボックスの値の取得 書き換えのコードをお教えいただければ幸いです
よろしくお願いします
追記  
下記コードにて値の取得はできたんですが、書き換えまではできておりません。。  
```javascript  
           var $checked = $('.form_sports [name=sport]:checked');  
           var valList = $checked.map(function(index, el) { return $(this).val(); });  
```  
###該当のソースコード
```javascript
       $(this).siblings(".save").click(function(){
           var $checked = $('.form_sports [name=sport]:checked').val();
//           var valList = $checked.map(function(index, el) { return $(this).val(); });
           console.log($checked);
           $('#my_sports').html($checked);
           $('#sports_box').hide();
       });
```
```html
<tr>
                           <th scope="row" rowspan="2">好きな種目
                               <div class="spOnly"><img src="/images/mypage/btn_edit.png" alt="編集" class="edit edit_on">
                               <img src="/images/mypage/btn_save.png" alt="保存" class="save edit_off">
                               <img src="/images/mypage/btn_cancel.png" alt="キャンセル" class="cancel edit_off"></div>
                           </th>
                           <td><span class="checkbox_data" id="my_sports"><?php echo htmlspecialchars( implode('、', $out_sports) ); ?></span>
                               <!--                              <input class="input" type="radio" name="favorite" value="サッカー バスケットボール" >-->
                               <img src="/images/mypage/btn_edit.png" alt="編集" class="edit_on pcOnly sports_open">
                               <img src="/images/mypage/btn_save.png" alt="保存" class="save edit_off pcOnly">
                               <img src="/images/mypage/btn_cancel.png" alt="キャンセル" class="cancel edit_off pcOnly"></td>
                       </tr>                     
<tr>
                           <td id="sports_box"><div class="sports_wrap">
                               <div class="edit_box sports">
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="soccer" class="checkbox checkbox_left"><form class="form_sports"><input type="checkbox" name="sport" value="サッカー" id='soccer'/>サッカー</form></label></span>
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="basketball" class="checkbox checkbox_right"><form class="form_sports"><input type="checkbox" name="sport" value="バスケットボール" id="basketball"/>バスケットボール</form></label></span>
                               </div>
                               <div class="edit_box sports">
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="baseball" class="checkbox checkbox_left"><form class="form_sports"><input type="checkbox" name="sport" value="野球" id='baseball'/>野球</form></label></span>
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="volleyball" class="checkbox checkbox_right"><form class="form_sports"><input type="checkbox" name="sport" value="バレーボール" id="volleyball"/>バレーボール</form></label></span>
                               </div>
                               <div class="edit_box sports">
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="wintersports" class="checkbox checkbox_left"><form class="form_sports"><input type="checkbox" name="sport" value="ウインタースポーツ" id='wintersports'/>ウインタースポーツ</form></label></span>
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="others" class="checkbox checkbox_right"><form class="form_sports"><input type="checkbox" name="sport" value="その他" id="others"/>その他</form></label></span>
                               </div></div>
                           </td>
                       </tr>
```
  • HTML

    17694 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    11053 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2 htmlを追加しました。

may88seiji

may88seiji score 77

2016/09/27 19:11  投稿

複数のチェックボックスの値を取得 書き換え
###前提
チェックボックスの値を編集して書き換える機能をつくっています。
![イメージ説明](c75e39411e106cacb2623b4cf7f79f97.png)
###実現したいこと
複数のチェックボックスの選択を変更して保存 現在の表示を変更したスポーツ名に書き換える
###試したこと
下記コードでひとつだけスポーツの書き換えができています。
(複数選択しても最初のひとつだけ反映される)
コメントアウトの行は複数用に試みましたがエラーになります。
複数のチェックボックスの値の取得 書き換えのコードをお教えいただければ幸いです
よろしくお願いします
###該当のソースコード
```javascript
       $(this).siblings(".save").click(function(){
           var $checked = $('.form_sports [name=sport]:checked').val();
//           var valList = $checked.map(function(index, el) { return $(this).val(); });
           console.log($checked);
           $('#my_sports').html($checked);
           $('#sports_box').hide();
       });
```
```html
                       <tr>
<tr>
                           <th scope="row" rowspan="2">好きな種目
                               <div class="spOnly"><img src="/images/mypage/btn_edit.png" alt="編集" class="edit edit_on">
                               <img src="/images/mypage/btn_save.png" alt="保存" class="save edit_off">
                               <img src="/images/mypage/btn_cancel.png" alt="キャンセル" class="cancel edit_off"></div>
                           </th>
                           <td><span class="checkbox_data" id="my_sports"><?php echo htmlspecialchars( implode('、', $out_sports) ); ?></span>
                               <!--                              <input class="input" type="radio" name="favorite" value="サッカー バスケットボール" >-->
                               <img src="/images/mypage/btn_edit.png" alt="編集" class="edit_on pcOnly sports_open">
                               <img src="/images/mypage/btn_save.png" alt="保存" class="save edit_off pcOnly">
                               <img src="/images/mypage/btn_cancel.png" alt="キャンセル" class="cancel edit_off pcOnly"></td>
                       </tr>                     
<tr>
                           <td id="sports_box"><div class="sports_wrap">
                               <div class="edit_box sports">
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="soccer" class="checkbox checkbox_left"><form class="form_sports"><input type="checkbox" name="sport" value="サッカー" id='soccer'/>サッカー</form></label></span>
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="basketball" class="checkbox checkbox_right"><form class="form_sports"><input type="checkbox" name="sport" value="バスケットボール" id="basketball"/>バスケットボール</form></label></span>
                               </div>
                               <div class="edit_box sports">
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="baseball" class="checkbox checkbox_left"><form class="form_sports"><input type="checkbox" name="sport" value="野球" id='baseball'/>野球</form></label></span>
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="volleyball" class="checkbox checkbox_right"><form class="form_sports"><input type="checkbox" name="sport" value="バレーボール" id="volleyball"/>バレーボール</form></label></span>
                               </div>
                               <div class="edit_box sports">
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="wintersports" class="checkbox checkbox_left"><form class="form_sports"><input type="checkbox" name="sport" value="ウインタースポーツ" id='wintersports'/>ウインタースポーツ</form></label></span>
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="others" class="checkbox checkbox_right"><form class="form_sports"><input type="checkbox" name="sport" value="その他" id="others"/>その他</form></label></span>
                               </div></div>
                           </td>
                       </tr>
```
  • HTML

    17694 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    11053 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 追記

may88seiji

may88seiji score 77

2016/09/27 19:01  投稿

複数のチェックボックスの値を取得 書き換え
###前提
チェックボックスの値を編集して書き換える機能をつくっています。
![イメージ説明](c75e39411e106cacb2623b4cf7f79f97.png)
###実現したいこと
複数のチェックボックスの選択を変更して保存 現在の表示を変更したスポーツ名に書き換える
###試したこと
下記コードでひとつだけスポーツの書き換えができています。
(複数選択しても最初のひとつだけ反映される)  
コメントアウトの行は複数用に試みましたがエラーになります。
複数のチェックボックスの値の取得 書き換えのコードをお教えいただければ幸いです
よろしくお願いします
###該当のソースコード
```javascript
       $(this).siblings(".save").click(function(){
           var $checked = $('.form_sports [name=sport]:checked').val();
//           var valList = $checked.map(function(index, el) { return $(this).val(); });
           console.log($checked);
           $('#my_sports').html($checked);
           $('#sports_box').hide();
       });
```
```html
                       <tr>
                           <td id="sports_box"><div class="sports_wrap">
                               <div class="edit_box sports">
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="soccer" class="checkbox checkbox_left"><form class="form_sports"><input type="checkbox" name="sport" value="サッカー" id='soccer'/>サッカー</form></label></span>
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="basketball" class="checkbox checkbox_right"><form class="form_sports"><input type="checkbox" name="sport" value="バスケットボール" id="basketball"/>バスケットボール</form></label></span>
                               </div>
                               <div class="edit_box sports">
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="baseball" class="checkbox checkbox_left"><form class="form_sports"><input type="checkbox" name="sport" value="野球" id='baseball'/>野球</form></label></span>
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="volleyball" class="checkbox checkbox_right"><form class="form_sports"><input type="checkbox" name="sport" value="バレーボール" id="volleyball"/>バレーボール</form></label></span>
                               </div>
                               <div class="edit_box sports">
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="wintersports" class="checkbox checkbox_left"><form class="form_sports"><input type="checkbox" name="sport" value="ウインタースポーツ" id='wintersports'/>ウインタースポーツ</form></label></span>
                                   <span class="mwform-radio-field vertical-item">
                                       <label for="others" class="checkbox checkbox_right"><form class="form_sports"><input type="checkbox" name="sport" value="その他" id="others"/>その他</form></label></span>
                               </div></div>
                           </td>
                       </tr>
```
  • HTML

    17694 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    11053 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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