in jquery using checkbox get li attr

Question

I want to get data of li using checkbox. in my code you can see checkboxes and list of songs ... i want when checkbox is checked and click on button .get all the checked li attr.

using jquery, when user checked checkboxes and click on button. i want to get

attr as like song , cover and artist.

as same like 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>

Upvotes: 1

Views: 696

Answer 1

Try this way: update

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

If i understand you correctly then you wish to get the song and cover from the the li if the checkbox is checked, i also changed the class of your links so i can easily find them with jQuery

jsFiddle

Answer 3

Okay, here's how I'd do it :

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

Now "selection" is a array of objects, each object containing one title, one artist, etc.

Store your data in the checkboxes directly, why add difficulty by storing them in a different element?