Getting checkbox value and show them

247
November 28, 2016, at 9:10 PM

I want to show value from checkbox checked items. Here is my js. in console getting undefined. How to solve this.

http://jsfiddle.net/bmtx4ykc/

$(document).ready(function() {
  $("#checkAll").change(function() {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
  });
  $('#submitButton').click(function() {
    var values = $("#add input[name=chkboxName]:checked").map(function() {
      row = $(this).closest("tr");
      return {
        id: $(this).val(),
        name: $(row).find("#name").text(),
        quantity: $(row).find("#quantity").text()
      }
    }).get();
    $('#result').append(values.name);
    console.log(values.name);
  });
});
Answer 1

values resembles an array of objects, use jquery each to display the data:

$(document).ready(function(){ 
	$("#checkAll").change(function () { 
		 $("input:checkbox").prop('checked', $(this).prop("checked")); 
	}); 
    $('#submitButton').click(function(){ 
        var values = $("#add input[name=chkboxName]:checked").map(function() 
                     { 
                         row = $(this).closest("tr"); 
                         return {  
                             id : $(this).val(), 
                             name     : $(row).find("#name").text(), 
                             quantity       : $(row).find("#quantity").text() 
                     } 
                  }).get(); 
         
        // empty the results div then loop the values and append the name 
        $('#result').empty(); 
        $(values).each(function(){ $('#result').append(this.name + '<br />');}); 
        
    }); 
});
		table{ 
		    border-collapse: collapse; 
		}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table border="1" id="add"> 
    <tr> 
        <th><input type="checkbox" id="checkAll" value="All"></th> 
        <th>Name</th> 
        <th>Quantity</th> 
    </tr> 
    <tr> 
        <td><input type="checkbox" name="chkboxName" value="1"></td> 
        <td id="name">Apple</td> 
        <td id="quantity">5</td> 
    </tr> 
    <tr> 
        <td><input type="checkbox" name="chkboxName" value="2"></td> 
        <td id="name">Orange</td> 
        <td id="quantity">6</td> 
    </tr> 
</table> 
<button id="submitButton">Show in table</button> 
        <div id="result"></div>

Answer 2

It's because the map() method is returning an array of objects.

You are getting undefined because you are trying to access the name property of the array. You need to access the name property of an object in the array.

For example, if the third row is selected, then values[0] would return the following:

console.log(values[0]);
// Object {id: "2", name: "Orange", quantity: "6"}
console.log(values[0].name);
// "Orange"

You could simply iterate over the items in the array in order to log the name property of each object:

Updated Example

values.forEach(function (row) {
    console.log(row.name);
});

As a side note, id attribute values must be unique within a document. Use classes instead.

READ ALSO
javascript - if else statement that uses document.getElementsByClassName with three possible scenarios

javascript - if else statement that uses document.getElementsByClassName with three possible scenarios

i am currently feeling my way through simple javascript tasks, i am trying to put together an if/else statement in javascript that check the h1 on my page to see if one of possibly three classes exist, after the javascript determines which class is attached...

203
Choose option by clicking in a &lt;ul&gt; placed in Modal - ANGULAR

Choose option by clicking in a <ul> placed in Modal - ANGULAR

I am doing an applicationIt is a table with some field

222
jQuery Ajax Script (Determining Week Begin- &amp; Startdate using PHP not working

jQuery Ajax Script (Determining Week Begin- & Startdate using PHP not working

I got the following php Script saved as getweekphp:

258
I want the jquery-overlay to cover full viewport window width

I want the jquery-overlay to cover full viewport window width

I want the jquery-overlay (grey area which appears when I open the picture) to cover full viewport window widthRight now it looks like this

247