27604

[code]

    <tr th:each="info : ${infoList}">
        <td><input type="checkbox" name="checkbox" onClick="checkboxClick();"/></td>
        <td>[[${info.testa}]]</td>
        <td>[[${info.testb}]]</td>
        <td>[[${info.testc}]]</td>
    </tr>
    
[/code]

■イメージ  
＝＝＝＝＝＝＝＝  
(チェックボックス) testa testb testc  
(チェックボックス) testa testb testc  
(チェックボックス) testa testb testc  
(チェックボックス) testa testb testc  
・・・  
ボタン  
＝＝＝＝＝＝＝＝

上記のようにデータベースから持ってきた値testa、testb、testcを表示しています。  
別にボタンがあり、ボタンを押したら、  
チェックボックスを有効にしたしたtesta、testb、testcをjavascriptで取得したいです。

javascriptでボタンを押したときに呼ばれる関数

[code]

    function onClickButton() {
    
        var testa = [];
        var testb = [];
        var testc = [];
    
        $('[name="checkbox"]:checked').each(function(){
            ★ここでどうにか値を持ってきて、testa、testb、testcの配列にpushできないかと考えています。
        });
    }
    
[/code]

★個所でチェックボックスでチェックされている分処理されるのですが、  
チェックされている該当の値testa、testb、testcをどのように取得していいのかがわかりません。  
どのようにすれば複数の値を取得できるのでしょうか。


CC BY-SA 3.0
2016-07-13T04:38:17.730
27592
2016-07-14T06:20:35.260
2016-07-14T06:20:35.260
3054
12842
question
javascript jquery
セレクタで選択した要素の、親要素の兄弟要素の内容を、全て取得したい


取得したい値は、チェックボックスの親の兄弟要素に入っています。  
jQueryの場合、親は`parent()`、兄弟は`siblings()`、要素の内容は`text()`などで取得出来ます。  
これらを使って例えば下記のように出来ます。

[code]

    var testa = [];
    var testb = [];
    var testc = [];
    var test_vars = [testa, testb, testc];
    
    $('[name="checkbox"]:checked').parent().each(function(_, elm){
        $(elm).siblings().each(function(index, test_elm){
            test_vars[index].push($(test_elm).text());
        });
    });
    
[/code]

[code]

    function onClickButton() {
      var testa = [];
      var testb = [];
      var testc = [];
      var test_vars = [testa, testb, testc];
    
      $('[name="checkbox"]:checked').parent().each(function(_, elm) {
        $(elm).siblings().each(function(index, test_elm) {
          test_vars[index].push($(test_elm).text());
        });
      });
    
      $("#view").html("testa: " + testa +
        "<br />testb: " + testb +
        "<br />testc: " + testc);
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <table>
      <tr>
        <td>
          <input type="checkbox" name="checkbox" />
        </td>
        <td>1列目_A</td>
        <td>1列目_B</td>
        <td>1列目_C</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="checkbox" />
        </td>
        <td>2列目_A</td>
        <td>2列目_B</td>
        <td>2列目_C</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="checkbox" />
        </td>
        <td>3列目_A</td>
        <td>3列目_B</td>
        <td>3列目_C</td>
      </tr>
    </table>
    
    <button onClick="onClickButton();">ボタン</button>
    
    <div id="view"></div>
[/code]


CC BY-SA 3.0
2016-07-13T13:37:15.200
27604
2016-07-13T13:37:15.200
3054
27592
answer