jquery - 在 jquery 中使用复选框获取 li attr

Question

我想使用复选框获取 li 的数据。在我的代码中，您可以看到复选框和歌曲列表...我想要选中复选框并单击按钮。获取所有选中的 li attr。

使用 jquery，当用户选中复选框并单击按钮时。我想获得

属性，例如歌曲、封面和艺术家。

与this site一样

 <table>
        <ul id="playlist" class="hidden">
            <tr>
                <td><input type="checkbox" value="check_1" name="check_1" id="check_1"></td>
                <td><li id="songlist" song="Bhai Nirmal Singh Ji - Apne Har Peh Benti.mp3" cover="cover1.jpg" artist="Linkin Park">Bhai Nirmal Singh Ji - Apne Har Peh Benti.mp3</li></td>
                <td><a href="" id="add">Add to Cart</a></td>
            </tr>   
            <tr>
                <td><input type="checkbox" value="check" name="check"></td>
                <td><li id="songlist" song="Linkin Park - One Step Closer.mp3" cover="cover1.jpg" artist="Linkin Park">One Step Closer.mp3</li></td>
                <td><a href="" id="add">Add to Cart</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" value="check" name="check"></td>
                <td><li song="Linkin Park - With You.mp3" cover="cover1.jpg" artist="Linkin Park">With You.mp3</li></td>
                <td><a href="">Add to Cart</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" value="check" name="check"></td>
                <td><li song="Linkin Park - Points Of Authority.mp3" cover="cover1.jpg" artist="Linkin Park">Points Of Authority.mp3</li></td>
                <td><a href="">Add to Cart</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" value="check" name="check"></td>
                <td><li song="Linkin Park - Crawling.mp3" cover="cover1.jpg" artist="Linkin Park">Crawling.mp3</li></td>
                <td><a href="">Add to Cart</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" value="check" name="check"></td>
                <td><li song="Linkin Park - Runaway.mp3" cover="cover1.jpg" artist="Linkin Park">Runaway.mp3</li></td>
                <td><a href="">Add to Cart</a></td>
            </tr>

        </ul>

    </table>

Answer 1

尝试这种方式:更新

$(window).load(function() {

  $(".add,#play_button").click(function() {
    var selected_items = $("#playlist tr td input:checked");

    if (selected_items.length == 0) {
      alert("item is not selected");
    } else {

      var song = [];
      var cover = [];
      var artist = [];
      selected_items.each(function() {
        song.push($(this).data("song"));
        //semilerly following
        //cover.push($(this).data("cover"));
        //artist.push($(this).data("artist"));


      })
      alert(song);
    }
  });
  $("#selectall").click(function() {
    var c = this.checked;
    $("#playlist :checkbox").prop("checked", c);
  });
  $("#selectall_button").click(function() {
    var c;
    if ($(this).val() == "Select All") {
      c = true;
      $(this).val("Deselct All");
    } else {
      c = false;
      $(this).val("Select All");
    }

    $("#playlist :checkbox").prop("checked", c);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="playlist">
  <tr>
    <td>
      <input type="checkbox" data-song="Bhai Nirmal Singh Ji - Apne Har Peh Benti.mp3" data-cover="cover1.jpg" data-artist="Linkin Park" name="check[]">
    </td>
    <td>
      Bhai Nirmal Singh Ji - Apne Har Peh Benti.mp3
    </td>
    <td><a href="javascript:void(0);" class="add">Add to Cart</a>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" data-song="Bhai  Ji - Apne" data-cover="cover1.jpg" data-artist="Linkin Park" name="check[]">
    </td>
    <td>
      Bhai Nirmal Singh Ji - Benti.mp3
    </td>
    <td><a href="javascript:void(0);" class="add">Add to Cart</a>
    </td>
  </tr>


</table>
<br/>
<br/>
<input type="checkbox" id="selectall" />select all/deselect all
<input type="submit" id="selectall_button" value="Select All" />
<input type="submit" id="play_button" value="Play selected" />