CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Pawan
Pawan

Reputation: 32321

How to get all the rows of a table for which checkbox is checked in only?

I am loping through the table to fetch only the selected tagids

But currently i am getting all the tag-ids , could you please tell me how to get tag id's for which checkbox is checked only

<table class="table" id="tagstablepac">
  <tbody>
    <tr>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="1" type="checkbox">ONE <span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="2" type="checkbox">TWO<span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="3" type="checkbox">Three <span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="4" type="checkbox">Four<span></span>
        </label>
      </td>
    </tr>
    <tr>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="5" type="checkbox">Five<span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="6" type="checkbox">SIX<span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="23" type="checkbox">SEVEN<span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="24" type="checkbox">Eight<span></span>
        </label>
      </td>
    </tr>
    <tr></tr>
  </tbody>
</table>

$(document).ready(function(){
    $("#tagstablepac > tbody  > tr > td .selecttags").each(function(){
       var tagid = $(this).data('tagid');
       console.log('video_id' + tagid);
    });
});

http://jsfiddle.net/cod7ceho/166/

Upvotes: 0

Views: 100

Answers (5)

codtex
codtex

Reputation: 6548

<table class="table" id="tagstablepac">
   <tbody>
      <tr>
         <td><label class="mt-checkbox mt-checkbox-outline"><input class="selecttags" data-tagid="1" type="checkbox">ONE <span></span></label></td>
         <td><label class="mt-checkbox mt-checkbox-outline"><input class="selecttags" data-tagid="2" type="checkbox">TWO<span></span></label></td>
         <td><label class="mt-checkbox mt-checkbox-outline"><input class="selecttags" data-tagid="3" type="checkbox">Three <span></span></label></td>
         <td><label class="mt-checkbox mt-checkbox-outline"><input class="selecttags" data-tagid="4" type="checkbox">Four<span></span></label></td>
      </tr>
      <tr>
         <td><label class="mt-checkbox mt-checkbox-outline"><input class="selecttags" data-tagid="5" type="checkbox">Five<span></span></label></td>
         <td><label class="mt-checkbox mt-checkbox-outline"><input class="selecttags" data-tagid="6" type="checkbox">SIX<span></span></label></td>
         <td><label class="mt-checkbox mt-checkbox-outline"><input class="selecttags" data-tagid="23" type="checkbox">SEVEN<span></span></label></td>
         <td><label class="mt-checkbox mt-checkbox-outline"><input class="selecttags" data-tagid="24" type="checkbox">Eight<span></span></label></td>
      </tr>
      <tr></tr>
   </tbody>
</table>
<button id="logChecked">Log checked</button> 

$(document).ready(function(){        
  $('#logChecked').on('click', function(){
    var rowsHavingChecked = [];
    $("#tagstablepac > tbody  > tr > td .selecttags").each(function(){
      if(this.checked){
        rowsHavingChecked.push($(this).closest('tr'));
      }
    });
    console.log(rowsHavingChecked);
  })
});

Upvotes: 1

Jobelle
Jobelle

Reputation: 2834

    <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#tagstablepac").on("change", "input", function() {
    var tagids = $(".selecttags:checked").get().map(function(elem) {
      return elem.getAttribute("data-tagid");
    });

    console.log(tagids);
  });
});
</script>
</head>
<body>
<div class="parent">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="tagstablepac">
  <tbody>
    <tr>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="1" type="checkbox">ONE <span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="2" type="checkbox">TWO<span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="3" type="checkbox">Three <span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="4" type="checkbox">Four<span></span>
        </label>
      </td>
    </tr>
    <tr>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="5" type="checkbox">Five<span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="6" type="checkbox">SIX<span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="23" type="checkbox">SEVEN<span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="24" type="checkbox">Eight<span></span>
        </label>
      </td>
    </tr>



    <tr></tr>
  </tbody>
</table></body>
</html>

Upvotes: 1

Andreas
Andreas

Reputation: 21881

Use the :checked selector

Matches all elements that are checked or selected.

var tagids = $("#tagstablepac input:checked").get().map(function (elem) {
    return elem.getAttribute("data-tagid");
});


$(function() {
  $("#tagstablepac").on("change", "input", function() {
    var tagids = $("#tagstablepac input:checked").get().map(function(elem) {
      return elem.getAttribute("data-tagid");
    });
    
    console.log(tagids);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="tagstablepac">
  <tbody>
    <tr>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="1" type="checkbox">ONE <span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="2" type="checkbox">TWO<span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="3" type="checkbox">Three <span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="4" type="checkbox">Four<span></span>
        </label>
      </td>
    </tr>
    <tr>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="5" type="checkbox">Five<span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="6" type="checkbox">SIX<span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="23" type="checkbox">SEVEN<span></span>
        </label>
      </td>
      <td>
        <label class="mt-checkbox mt-checkbox-outline">
          <input class="selecttags" data-tagid="24" type="checkbox">Eight<span></span>
        </label>
      </td>
    </tr>
    <tr></tr>
  </tbody>
</table>

Upvotes: 3

mukesh kudi
mukesh kudi

Reputation: 729

This will Work for you:

  $(document).ready(function()
    {
        $("#tagstablepac > tbody  > tr > td .selecttags").each(function()
        {
              if($(this).is(":checked"))
              {
              var tagid = $(this).data('tagid');
                console.log('video_id' + tagid);
               }
        });
    });

Upvotes: 1

owobeid
owobeid

Reputation: 183

Edit: I meant checked

Use :selected in jquery as follows:

$("#tagstablepac > tbody  > tr > td .selecttags:checked")

Upvotes: 1

Related Questions