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

Question

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

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

attr 就像歌曲、封面和艺术家一样。

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

Answer 2

好的，我会这样做：

$("button").click( function(){
  
  var selection = [];
  
  $("input[type=checkbox]:checked:enabled").each( function(){ // Selects checked checkboxes and loops through them
    
      selection.push({
          "title"  : $(this).attr("data-title"),
          "artist" : $(this).attr("data-artist")
      
       })
    
  })
  
  $("#results").html(JSON.stringify(selection));
  
  console.log(selection);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li>
     <input type="checkbox" data-title="song 1" data-artist="Artist 1" /> Song 1
   </li>
  
   <li>
     <input type="checkbox" data-title="song 2" data-artist="Artist 2" /> Song 2
   </li>
  
  <li>
     <input type="checkbox" data-title="song 3" data-artist="Artist 3" /> Song 3
   </li>
</ul>

<button>Get checked songs</button> <br>
<br>
<p id="results"></p>

现在“选择”是一组对象，每个对象包含一个标题、一个艺术家等。

将数据直接存储在复选框中，为什么要通过将它们存储在不同的元素中来增加难度？

Answer 3

如果我对你的理解正确，那么你希望从li 获取歌曲和封面，如果选中该复选框，我还更改了链接的类，以便我可以使用 jQuery 轻松找到它们

jsFiddle