Поменять несколько значений в input type="text"
Имеем несколько "смысловых" групп. Каждая состоит из одного checkbox и нескольких input type="text".
<input type="checkbox" id="c1"> <input type="text" id="t1" value=""> <input type="text" id="t2" value=""> <input type="text" id="t3" value=""> <input type="text" id="t4" value=""> <input type="checkbox" id="c2"> <input type="text" id="t5" value=""> <input type="text" id="t6" value=""> <input type="checkbox" id="c3"> <input type="text" id="t7" value=""> <input type="text" id="t8" value=""> <input type="text" id="t9" value=""> Как сделать, чтобы при включении чекбокса, свойства value всех текстовых полей в "группе" выставлялось в 1? |
dpts,
:-? <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ var s = $("input:checkbox"); s.click(function() { this.checked && $(this).nextUntil(s).val(1); }); }); </script> </head> <body> <input type="checkbox" id="c1" > <input type="text" id="t1" value=""> <input type="text" id="t2" value=""> <input type="text" id="t3" value=""> <input type="text" id="t4" value=""> <input type="checkbox" id="c2"> <input type="text" id="t5" value=""> <input type="text" id="t6" value=""> <input type="checkbox" id="c3"> <input type="text" id="t7" value=""> <input type="text" id="t8" value=""> <input type="text" id="t9" value=""> </body> </html> |
Спасибо за оперативный ответ
Спасибо. Работает.
А как теперь сбросить value в 0 если checkbox выключить? |
dpts,
:-? Цитата:
$(this).nextUntil(s).val(+this.checked); |
Огромнейшее спасибо
Благодарю.
|
А если усложнить верстку - не работает
Если верстка, как в предыдущем примере, то все отлично работает.
Но стоит начать заворачивать чекбоксы и поля ввода в таблицы, работать перестает. <html> <head> <meta http-equiv="Content-Type" content="number/html; charset=windows-1251"> <meta http-equiv="Content-Language" content="ru"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <title>Чекбоксы</title> <script> $(function(){ var s = $("input:checkbox"); s.click(function() { this.checked && $(this).nextUntil(s).val(1); }); }); $(function(){ var s = $("input:checkbox"); s.click(function() { $(this).nextUntil(s).val(+this.checked); }); }); </script> </head> <body> <div id="d1"> <table id="td11"> <tr> <td><input type="checkbox" id="c1" ><td> </tr> </table> <table id="td12"> <tr> <td><input type="text" id="t1" value="0"></td> </tr> <tr> <td><input type="text" id="t2" value="0"></td> </tr> <tr> <td><input type="text" id="t3" value="0"></td> </tr> <tr> <td><input type="text" id="t4" value="0"></td> </tr> </table> </div> <div id="d2"> <table id="td21"> <tr> <td><input type="checkbox" id="c2" ><td> </tr> </table> <table id="td22"> <tr> <td><input type="text" id="t5" value="0"></td> </tr> <tr> <td><input type="text" id="t6" value="0"></td> </tr> </table> </div> <div id="d3"> <table id="td31"> <tr> <td><input type="checkbox" id="c3" ><td> </tr> </table> <table id="td32"> <tr> <td><input type="text" id="t7" value="0"></td> </tr> <tr> <td><input type="text" id="t8" value="0"></td> </tr> </table> </div> </body> </html> Как исправить? |
dpts,
добавлен класс check -- если не подходит класс перечислите id нужных div $("#d1, #d2, #d3") <html> <head> <meta http-equiv="Content-Type" content="number/html; charset=windows-1251"> <meta http-equiv="Content-Language" content="ru"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <title>Чекбоксы</title> <script> $(function() { $(".check").each(function(d, a) { var b = $("input:checkbox", a), c = $("input:text", a); b.click(function() { c.val(+this.checked) }) }) }); </script> </head> <body> <div id="d1" class="check"> <table id="td11"> <tr> <td><input type="checkbox" id="c1" ></td> </tr> </table> <table id="td12"> <tr> <td><input type="text" id="t1" value="0"></td> </tr> <tr> <td><input type="text" id="t2" value="0"></td> </tr> <tr> <td><input type="text" id="t3" value="0"></td> </tr> <tr> <td><input type="text" id="t4" value="0"></td> </tr> </table> </div> <div id="d2" class="check"> <table id="td21"> <tr> <td><input type="checkbox" id="c2" ></td> </tr> </table> <table id="td22"> <tr> <td><input type="text" id="t5" value="0"></td> </tr> <tr> <td><input type="text" id="t6" value="0"></td> </tr> </table> </div> <div id="d3" class="check"> <table id="td31"> <tr> <td><input type="checkbox" id="c3" ></td> </tr> </table> <table id="td32"> <tr> <td><input type="text" id="t7" value="0"></td> </tr> <tr> <td><input type="text" id="t8" value="0"></td> </tr> </table> </div> </body> </html> |
Благодарю, работает.
|
Часовой пояс GMT +3, время: 22:50. |