obtain value of row of selected checks

Navigation
4

I have an html table and in each record I put a checkbox How could I do so that when I select some records with the checkbox I get the data of the row to send them through a form? 

$(document).ready(function(){
$("input[type=checkbox]:checked").each(function(){
	//cada elemento seleccionado
	alert($(this).val());
});
});
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
<body>
<form id="formulario" name="formulario" action="">
<table>
<tr>
<td><input type="checkbox" name="elemento1" value="1"/></td>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento2" value="2"/></td>
<td>ddd</td>
<td>eee</td>
<td>fff</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento3" value="3"/></td>
<td>ggg</td>
<td>hhh</td>
<td>iii</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento4" value="4"/></td>
<td>jjj</td>
<td>kkk</td>
<td>lll</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento5" value="5"/></td>
<td>mmm</td>
<td>nnn</td>
<td>ooo</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento6" value="6"/></td>
<td>ppp</td>
<td>qqq</td>
<td>rrr</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento7" value="7"/></td>
<td>sss</td>
<td>ttt</td>
<td>uuu</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento8" value="8"/></td>
<td>vvv</td>
<td>www</td>
<td>xxx</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento9" value="9"/></td>
<td>yyy</td>
<td>zzz</td>
<td>AAA</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento10" value="10"/></td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
</table>
<input type="submit" value="seleccionar" onclick=""/>
</form>
</body>
</html>

In the previous example I only get the value of the check but not the one of the whole row What could I do?

    
asked by Ivxn 01.08.2016 в 18:14
source

2 answers

4

I assume that the values you want to obtain are the texts that are in each of the td of the row of the checkbox, for which we will search in the DOM the td "father" of the selected checkbox and then we will find the other td adjacent: 

  // para cada checkbox "chequeado"
  $("input[type=checkbox]:checked").each(function(){

    // buscamos el td más cercano en el DOM hacia "arriba"
    // luego encontramos los td adyacentes a este
    $(this).closest('td').siblings().each(function(){

      // obtenemos el texto del td 
      console.log($(this).text());
    });
  });
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
<body>
<form id="formulario" name="formulario" action="">
<table>
<tr>
<td><input type="checkbox" name="elemento1" value="1"/></td>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento2" value="2" checked="checked" /></td>
<td>ddd</td>
<td>eee</td>
<td>fff</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento3" value="3" checked="checked"/></td>
<td>ggg</td>
<td>hhh</td>
<td>iii</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento4" value="4"/></td>
<td>jjj</td>
<td>kkk</td>
<td>lll</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento5" value="5"/></td>
<td>mmm</td>
<td>nnn</td>
<td>ooo</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento6" value="6"/></td>
<td>ppp</td>
<td>qqq</td>
<td>rrr</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento7" value="7"/></td>
<td>sss</td>
<td>ttt</td>
<td>uuu</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento8" value="8"/></td>
<td>vvv</td>
<td>www</td>
<td>xxx</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento9" value="9"/></td>
<td>yyy</td>
<td>zzz</td>
<td>AAA</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento10" value="10"/></td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
</table>
<input type="submit" value="seleccionar" onclick=""/>
</form>
</body>
</html>

Modification to obtain the values selected as a string, separated by spaces: 

    // para cada checkbox "chequeado"
  $("input[type=checkbox]:checked").each(function(){
    var result = [];
    var i = 0;
    
    // buscamos el td más cercano en el DOM hacia "arriba"
    // luego encontramos los td adyacentes a este
    $(this).closest('td').siblings().each(function(){

      // obtenemos el texto del td 
      result[i] = $(this).text();
      ++i;
    });

    console.log(result.join(' '));
  });
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
<body>
<form id="formulario" name="formulario" action="">
<table>
<tr>
<td><input type="checkbox" name="elemento1" value="1"/></td>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento2" value="2" checked="checked" /></td>
<td>ddd</td>
<td>eee</td>
<td>fff</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento3" value="3" checked="checked"/></td>
<td>ggg</td>
<td>hhh</td>
<td>iii</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento4" value="4"/></td>
<td>jjj</td>
<td>kkk</td>
<td>lll</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento5" value="5"/></td>
<td>mmm</td>
<td>nnn</td>
<td>ooo</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento6" value="6"/></td>
<td>ppp</td>
<td>qqq</td>
<td>rrr</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento7" value="7"/></td>
<td>sss</td>
<td>ttt</td>
<td>uuu</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento8" value="8"/></td>
<td>vvv</td>
<td>www</td>
<td>xxx</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento9" value="9"/></td>
<td>yyy</td>
<td>zzz</td>
<td>AAA</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento10" value="10"/></td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
</table>
<input type="submit" value="seleccionar" onclick=""/>
</form>
</body>
</html>

Modification (again), to obtain a single string with all the selected values: 

  var result = [];
  var i = 0;
  // para cada checkbox "chequeado"
  $("input[type=checkbox]:checked").each(function(){
    
    // buscamos el td más cercano en el DOM hacia "arriba"
    // luego encontramos los td adyacentes a este
    $(this).closest('td').siblings().each(function(){

      // obtenemos el texto del td 
      result[i] = $(this).text();
      ++i;
    });
  });

  console.log(result.join(' '));
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
<body>
<form id="formulario" name="formulario" action="">
<table>
<tr>
<td><input type="checkbox" name="elemento1" value="1"/></td>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento2" value="2" checked="checked" /></td>
<td>ddd</td>
<td>eee</td>
<td>fff</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento3" value="3" checked="checked"/></td>
<td>ggg</td>
<td>hhh</td>
<td>iii</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento4" value="4"/></td>
<td>jjj</td>
<td>kkk</td>
<td>lll</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento5" value="5"/></td>
<td>mmm</td>
<td>nnn</td>
<td>ooo</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento6" value="6"/></td>
<td>ppp</td>
<td>qqq</td>
<td>rrr</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento7" value="7"/></td>
<td>sss</td>
<td>ttt</td>
<td>uuu</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento8" value="8"/></td>
<td>vvv</td>
<td>www</td>
<td>xxx</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento9" value="9"/></td>
<td>yyy</td>
<td>zzz</td>
<td>AAA</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento10" value="10"/></td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
</table>
<input type="submit" value="seleccionar" onclick=""/>
</form>
</body>
</html>
    
answered by 01.08.2016 / 18:32
source
0

With your code as such at the beginning will not show anything I guess you do it with a function, the only thing that modifies your code is the alert .

I'll explain what you do, The this corresponds to check selected:

  • Now how are you in an element that does not have siblings, so to speak, you have to go up one level with parent()

  • Now we have hemanos with the father of the selected element here, we can not access the sibling elements, so we will have to raise another level of father

  • After parent() you should search for the item with .find('td')

  • At this level we can now access all the <td> elements with which we can access with .eq(0) , .eq(1) , etc. before html() 

$(document).ready(function(){
$("input[type=checkbox]:checked").each(function(){
	//cada elemento seleccionado
	console.log($(this).parent().parent().find('td').eq(1).html());
    console.log($(this).parent().parent().html());
  	console.log($(this).parent().parent().text());

});
});
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
<body>
<form id="formulario" name="formulario" action="">
<table>
<tr>
<td><input type="checkbox" name="elemento1" value="1" checked/></td>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento2" value="2"/></td>
<td>ddd</td>
<td>eee</td>
<td>fff</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento3" value="3"/></td>
<td>ggg</td>
<td>hhh</td>
<td>iii</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento4" value="4"/></td>
<td>jjj</td>
<td>kkk</td>
<td>lll</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento5" value="5"/></td>
<td>mmm</td>
<td>nnn</td>
<td>ooo</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento6" value="6"/></td>
<td>ppp</td>
<td>qqq</td>
<td>rrr</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento7" value="7"/></td>
<td>sss</td>
<td>ttt</td>
<td>uuu</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento8" value="8"/></td>
<td>vvv</td>
<td>www</td>
<td>xxx</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento9" value="9"/></td>
<td>yyy</td>
<td>zzz</td>
<td>AAA</td>
</tr>
<tr>
<td><input type="checkbox" name="elemento10" value="10"/></td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
</table>
<input type="submit" value="seleccionar" onclick=""/>
</form>
</body>
</html>
    
answered by 01.08.2016 в 18:36
Error: Your JAVA_HOME is invalid: C: \ Program Files \ Java \ jdk1.8.0_73 Select tr of a table with javaScript if it has a text