Append data-id to href using js or jQuery

Question

Suppose I have a table that looks like this:

<table>
  <tbody>
    <tr class="card-id" data-id="1">
      <td>
         <a href="http://www.test.nl/">Card 1</a>
         <input class="option" type="checkbox" />
      </td>
    </tr>
    <tr class="card-id" data-id="2">
      <td>
         <a href="http://www.test.nl/">Card 2</a>
         <input class="option" type="checkbox" />
      </td>
    </tr>
    <tr class="card-id" data-id="3">
      <td>
         <a href="http://www.test.nl/">Card 3</a>
         <input class="option" type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>

Is it possible to get the data-id of the table row which have are checked then append these to the url?

I tried using this code in js

        $(".option").click(function () {
          var id = $(this).closest('.card-id').data('id');

          $(".options-count a").each(function () {
            var $this = $(this);
            var _href = $this.attr("href");
            $this.attr("href", _href + 'card-id=' + id);
          });
       });

and got this

<a href="http://www.test.nl/card-id=1card-id=2"></a>

but I was hoping for something like

<a href="http://www.test.nl/result?card_id=1&card_id=2">Card 1</a>

Answer 1

$(document).ready(function(){
    $('[type=checkbox].option').change(function(ev){
        var anchor = $(this).parent('td').first('a')
        var url = "http://www.test.nl/result?";
        var queryString = '';
        $(this).parents('tbody').find('[type=checkbox]:checked').each(function(n,cb){
           queryString += 'card_id=' + $(cb).parents('tr.card-id').attr('data-id') + '&';
        });
      url += queryString.slice(0, -1);;
      anchor.attr('href',url);
      console.log(url);
    });
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="card-id" data-id="1">
      <td>
         <a href="http://www.test.nl/">Card 1</a>
         <input class="option" type="checkbox" />
      </td>
    </tr>
    <tr class="card-id" data-id="2">
      <td>
         <a href="http://www.test.nl/">Card 2</a>
         <input class="option" type="checkbox" />
      </td>
    </tr>
    <tr class="card-id" data-id="3">
      <td>
         <a href="http://www.test.nl/">Card 3</a>
         <input class="option" type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>