如何获取仅为其选中复选框的表的所有行?

时间:2016-10-14 10:36:40

标签: javascript jquery html checkbox

我希望通过表格只获取选定的标签

但是目前我正在获取所有标记ID,请您告诉我如何获取标记ID,仅选中复选框

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

5 个答案:

答案 0 :(得分:3)

使用:checked选择器

匹配已选中或选中的所有元素。

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>

答案 1 :(得分:1)

编辑:我的意思是检查

使用:在jquery中选择如下:

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

答案 2 :(得分:1)

这对你有用:

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

答案 3 :(得分:1)

<input id="hvorMange" type="number">
<button type="button" onclick="skrivUt12()">Finn tallet</button>
<p id="skrivUt12"></p> 



var liste = [12,14,13,76,5,1,23,12,87,124,674,98,3,7,-3,5];  


function skrivUt12(){

var tall = +document.getElementById("hvorMange").value;
var sum = 0;


for(i = 0; i < liste.length; i++) {
        if (tall === liste[i]) {
            sum++;
            document.getElementById("skrivUt12").innerHTML = "Tallet " + tall + " finnes " + sum + " antall ganger";
            return true;
        }
         else {
            document.getElementById("skrivUt12").innerHTML = "Tallet " + tall + " finnes ikke";
        }
    }
}
stress -c 8

答案 4 :(得分:1)

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