4
<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>

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

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

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

function onClickButton() {

    var testa = [];
    var testb = [];
    var testc = [];

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

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

1 件の回答 1

1

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

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());
    });
});

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);
}
<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>

1
  • コメントありがとうございます。javascriptもHTMLも初めてでまだよくわからないことが多いです。 早速mjyさまのおっしゃる内容を取り込み、デバッグしてみました。 ほしいデータを取得することが可能でした。ありがとうございます!
    – kanko
    Commented 2016年7月14日 4:30

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。