jsで選択行の値取得

Question

お世話になっております。
htmlでモーダルを用意し、処理ボタンが押されたらjsでモーダルにappendしてモーダルを表示しています。
モーダルの中に「編集」「確認」「削除」のボタンがありそれぞれのボタンを押してsubmitして処理を行うときはhiddenで値を渡せています。
やりたいことはモーダルを表示しながらチェックしたときに該当の行のidを取得したいです。

          <td>
                  <input type="button" value="処理" class="btn btn-primary btn-xs editmodal" data-toggle="modal" data-target="#Modal_{{$result->no}}_{{$result->code}}" >      
                    
                  <div class="modal fade" id="Modal_{{$result->no}}_{{$result->code}}" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
                                    <h4 class="modal-title">サンプル</h4>
                                </div>
                                    <div class="modal-body">
                                        <table class="table table-bordered table-striped" style="clear: both">
                                            <tr>
                                                <th>名前</th>
                                                <th>コード</th>
                                                <th>処理</th>
　　　　　　　　　　　　　　　　　　　　　　　　  <th>チェック</th>
                                            </tr>
                                            <tbody id="point">
                                    
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div><!--モーダル-->
            </td>

                                $('#point td').remove();
                                for(var i=0;i<json.length;i++){    
                                    $('tbody #point').append('<tr><td>'+json[i].name+'</td>'
                                                                +'<td>'+json[i].code+'</td>'
                                                                +'<td>'
                                                                +'<form action="/edit" method="get">'//編集ボタン
                                                                +'<input type="hidden" name="id" value="'+json[i].id+'">'
                                                                +'<input type="hidden" name="name" value="'+json[i].name+'">'
                                                                +'<input type="hidden" name="code" value="'+json[i].code+'">'
                                                                +'<input type="submit" value="編集" name="edit" class="btn btn-success btn-xs">'
                                                                +'</form>'
                                                                +'<form action="/confirm" method="get">'//確認ボタン
                                                                +'<input type="hidden" name="id" value="'+json[i].id+'">'
                                                                +'<input type="hidden" name="name" value="'+json[i].name+'">'
                                                                +'<input type="hidden" name="code" value="'+json[i].code+'">'
                                                                +'<input type="submit" value="確認" name="confirm" class="btn btn-primary btn-xs">'
                                                                +'</form>'
                                                                +'<form action="/delete" method="get">'//削除ボタン
                                                                +'<input type="hidden" name="id" value="'+json[i].id+'">'
                                                                +'<input type="hidden" name="name" value="'+json[i].name+'">'
                                                                +'<input type="hidden" name="code" value="'+json[i].code+'">'
                                                                +'<input type="submit" value="削除"  name="delete" class="btn btn-danger btn-xs">'
                                                                +'</form></td><td><input type="checkbox" name="sample_check" value=""></td></tr>');
                                 }
                $('input[name="sample_check"]').click(function(){
                    var id = $('input:hidden[name="id"]').val();
                    console.log(id); 
                });

ajaxでデータを取得し、モーダル内にデータが3行できるのですが、各行のチェックボックスをクリックした際に
id が全て同じ数字になってしまいます。
idは3行の中で一意になっているのでその値を取得したいのですが、やり方がわかりませんでした。
よろしくお願いいたします。

Comments

[m.ts10806]

インデントはきちんと整理してください。離れすぎているとどこからどこまでなのかスコープが分かりません。

[cofee]

申し訳ございません。整えました。

[退会済みユーザー]

sample_check がformの外側にあるのはいいの？ アクションごとにformを作らずに3つまとめれば対処しやすそうなのですが。

[m.ts10806]

あんまり整ってないような？左側の空白は何でしょうか。

[m.ts10806]

手動で整えるより何かしらの整形サービスを使われた方が良いです。

Answer 1

jsonからテーブルの行をつくってチェックボックスを生成しているなら
チェックボックス自体のvalue（ないしdata-valueなど）にidをふってしまえばラクでしょう
もちろん相対的な位置で処理することも可能です

var json=[
  {id:1,name:"hoge",code:"aaaaa"},
  {id:2,name:"fuga",code:"bbbbb"},
  {id:3,name:"piyo",code:"ccccc"},
];
$(function(){
  $.each(json,function(){
    $("<tr>")
      .append($('<td>')
         .append($('<form>').attr({'action':'/edit','method':'get'})
            .append($('<input>').attr({'type':'hidden','name':'id','value':$(this).attr('id')}))
            .append($('<input>').attr({'type':'hidden','name':'name','value':$(this).attr('name')}))
            .append($('<input>').attr({'type':'hidden','name':'code','value':$(this).attr('code')}))
            .append($('<input>').attr({'type':'submit','value':'編集'}))
         ))
      .append($('<td>')
         .append($('<form>').attr({'action':'/confirm','method':'get'})
            .append($('<input>').attr({'type':'hidden','name':'id','value':$(this).attr('id')}))
            .append($('<input>').attr({'type':'hidden','name':'name','value':$(this).attr('name')}))
            .append($('<input>').attr({'type':'hidden','name':'code','value':$(this).attr('code')}))
            .append($('<input>').attr({'type':'submit','value':'確認'}))
         ))
      .append($('<td>')
         .append($('<form>').attr({'action':'/delete','method':'get'})
            .append($('<input>').attr({'type':'hidden','name':'id','value':$(this).attr('id')}))
            .append($('<input>').attr({'type':'hidden','name':'name','value':$(this).attr('name')}))
            .append($('<input>').attr({'type':'hidden','name':'code','value':$(this).attr('code')}))
            .append($('<input>').attr({'type':'submit','value':'削除'}))
         ))
      .append($('<td>')
         .append($('<input>').attr({'type':'checkbox','name':'sample_check','value':$(this).attr('id')}))
      ).appendTo('#point');
  });
  $('[name=sample_check]').on('click',function(){
    console.log($(this).val());
    console.log($(this).closest('tr').find('[name=id]').val());
  });
});

<table>
<thead>
<tr>
<th>名前</th>
<th>コード</th>
<th>処理</th>
<th>チェック</th>
</tr>
</thead>
<tbody id="point">
</tbody>
</table>

Comments

[cofee]

valueにidを振ることで解決しました、ありがとうございました。