What is a promise in Javascript?

Question

Ivxn

Asked: 2020-08-02 08:14:58 +0800 CST 2020-08-02 08:14:58 +0800 CST 2020-08-02 08:14:58 +0800 CST

получить значение строки выбранных чеков

772

У меня есть html таблица и в каждой записи я ставлю чекбокс.Как сделать так чтобы при выборе некоторых записей чекбоксом я получал данные строки для отправки их через форму?

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

В предыдущем примере я получаю только контрольное значение, но не всю строку, что мне делать?

2 Answers

Voted

Shaz · Answer 1 · 2020-08-02T08:32:44+08:00

Я предполагаю, что значения, которые вы хотите получить, — это тексты, которые находятся в каждой tdстроке флажка, для которых мы будем искать в DOM td«родителя» выбранного флажка, а затем найдем другие tdсоседние:

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

Модификация для получения выбранных значений в виде строки, разделенной пробелами:

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

Модификация (снова), чтобы получить одну строку со всеми выбранными значениями:

  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>

JuankGlezz · Answer 2 · 2020-08-02T08:36:14+08:00

С вашим кодом как таковым сначала он ничего не покажет, я полагаю, вы делаете это с помощью функции, единственное, что модифицирует ваш код, это файл alert.

Я объясню, что он делает. Элемент thisсоответствует checkвыбранному:

Теперь, поскольку вы находитесь в элементе, у которого, так сказать, нет братьев и сестер, вам придется подняться на уровень выше сparent()
Теперь у нас есть одноуровневые элементы с родителем выбранного элемента, здесь мы по-прежнему не можем получить доступ к одноуровневым элементам, поэтому нам придется подняться на другой родительский уровень.
После parent()вы должны искать элемент с.find('td')
На этом уровне мы уже можем получить доступ ко всем элементам <td>, к которым мы можем получить доступ с помощью .eq(0), .eq(1), и т. д. до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>

получить значение строки выбранных чеков

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?