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

You can do the following in a change event of the checkbox

var id = [];//create a empty list of ids
var href = "http://www.test.nl/result?card_id=";//create the start of the url
$('input:checked').each(function(){
   id.push($(this).closest('.card-id').attr('data-id'));//push the id of the selected to the array
})
href = href+id.join('&card_id=');//join the array to a string
console.log(href)//append the formed link to a link tag or in this case to the console

demo:

 $(document).ready(function() { $('[type=checkbox].option').change(function(ev) { var id = []; //create a empty list of ids var href = "http://www.test.nl/result?card_id="; //create the start of the url $('input:checked').each(function() { id.push($(this).closest('.card-id').attr('data-id')); //push the id of the selected to the array }) href = href + id.join('&card_id='); //join the array to a string console.log(href); }); }); 

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

or better to use a single named variable and split the ids in the backend:

 $(document).ready(function() {
      $('[type=checkbox].option').change(function(ev) {
        var id = []; //create a empty list of ids
        var href = "http://www.test.nl/result?card_id="; //create the start of the url
        $('input:checked').each(function() {
          id.push($(this).closest('.card-id').attr('data-id')); //push the id of the selected to the array
        })
        href = href + id.join(','); //join the array to a string
        console.log(href);
      });

 $(document).ready(function() { $('[type=checkbox].option').change(function(ev) { var id = []; //create a empty list of ids var href = "http://www.test.nl/result?card_id="; //create the start of the url $('input:checked').each(function() { id.push($(this).closest('.card-id').attr('data-id')); //push the id of the selected to the array }) href = href + id.join(','); //join the array to a string console.log(href); }); }); 

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

Answer 2

 $(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> 

Answer 3

As per my understanding you just wanted to get "data-id". if yes then you can do it in two ways are listed below:

1st:

<table id=tbl1><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>

var test=  $("#tbl1");
test.find('[data-id="qty"]')

This will give you the full "TR" row of the table.

And if you want to get the value of "data-id" then you have to use

var value = test.attr("data-id");

Hope this will help you.