Как определить радиокнопку в javascript

Я создаю динамическую таблицу, в которой каждая строка имеет группу переключателей, размещенных в разных столбцах. Я хочу изменить цвет фона ячейки при щелчке правой кнопкой мыши. Я создаю таблицу, используя нижеприведенный фрагмент кода. Как определить переключатель в javascript, чтобы я мог установить ячейку с соответствующим цветом фона.Как определить радиокнопку в javascript

<table> 
    <c:forEach> 
     <tr> 
      <c:forEach> 
       <td><input type="radio" value="" /></td> 
      </c:forEach> 
     </tr> 
    </c:forEach> 
</table>

источник

2010-02-16 user274229

вы должны попытаться установить уникальный идентификатор для поля ввода при его создании (например ID = «theradiobutton»)

Тогда вы можете ссылаться на него легко с помощью методов DOM!

источник

2010-02-16 09:46:58

вы также можете добавить событие onClick() для каждого переключателя, чтобы выполнить то, что вам нужно. Но лучше иметь уникальный идентификатор ... –

Вам необходимо установить идентификатор или использовать имя поддельного класса.

Позже я должен использовать jquery для доступа и их изменения. http://www.google.es/search?rlz=1C1GGLS_esES361ES361&sourceid=chrome&ie=UTF-8&q=radio+button+jquery

источник

2010-02-16 09:47:45

var myform = document.forms['myform']; 

for (var i=0; i < myform.elements; i++) 
    if (myform.elements[i].type == 'radio') ...do your stuff

Надеется, что это помогает.

источник

2010-02-16 09:48:05 aefxx

это нормально, но если у вас есть несколько переключателей и только хотите установить цвет фона на ОДИН из них, он начнет становиться беспорядочным ... –

Используйте dojo или jQuery, чтобы выбрать узел radioButton, затем используйте выражения CSS-фильтра, чтобы установить тег td (domNode dom node) на любой цвет, который вы хотите.

Пример использования додзё:

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
      <title>Dojo selectors example</title> 
      <script type="text/javascript"> 
       var djConfig = { 
        parseOnLoad: true, 
        isDebug: true, 
        locale: 'en-us' 
       }; 
      </script> 
      <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.4.1/dojo/dojo.xd.js"></script> 
     <script type="text/javascript"> 

      dojo.addOnLoad(function() { 
       // Get all the radioButtons that are inside a <td> tag 
       dojo.query("td > input").forEach(function(node, index, array){ 
        var td = node.parentNode; 
        dojo.addClass(td, "red"); 
        dojo.connect(td, "onclick", function(){dojo.toggleClass(td, "white");}); 
       }); 
      }); 


     </script> 
     <style type="text/css"> 
     .red { background-color : red; } 
     .white { background-color : white; } 
    </style> 
    </head> 
    <body> 
     <form id="form1"> 
     <table> 
      <tr> 
       <td><input type="radio" value="" /></td> 
      </tr> 
      <tr> 
       <td><input type="radio" value="" /></td> 
      </tr> 
      <tr> 
       <td><input type="radio" value="" /></td> 
      </tr> 
     </table> 
     </form> 
</body> 
</html>

Я оставлю это до вас, чтобы исправить поведение RadioButton в ...

источник

2010-02-16 13:17:26 Philippe

Это просто с jQuery. Вот SSCCE, copy'n'paste'n'run.

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Test</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $('#tableId input[name=row]').click(function() { 
        $('#tableId tr').removeClass('selected'); // Reset. 
        $(this).parents('tr').addClass('selected'); 
       }); 
      }); 
     </script> 
     <style> 
      tr.selected { 
       background: #ffc; 
      }    
     </style> 
    </head> 
    <body> 
     <table id="tableId"> 
      <tr><td><input type="radio" name="row" value="row1">row1</td></tr> 
      <tr><td><input type="radio" name="row" value="row2">row2</td></tr> 
      <tr><td><input type="radio" name="row" value="row3">row3</td></tr> 
     </table> 
    </body> 
</html>

Просто переведите стол назад в динамический аромат, который у вас был с JSP/JSTL.

источник

2010-02-16 13:50:57 BalusC

Это подход, который я бы взял, но я бы использовал встроенный селектор радиостанций jQuery, поскольку он более эффективен (и требует меньше настройки HTML-кода). Таким образом, это будет $ ("# tableId: radio"). Click (function() ...); – ckramer

@ckramer: Я знаю это. Тем не менее, он может иметь больше радиобутов в одной и той же таблице для других целей. Я бы в противном случае «случайно» использовал 'input [type = radio]';) О, если вам нравится этот подход, почему бы вам просто не подняться наверх? : о – BalusC

Не становясь слишком суетливым, это действительно довольно просто. Вам не нужно определить радиокнопку, просто вызовите обработчик события и передать экземпляр кнопки с ним:

<td><input type="radio" value="" onclick="colorMyCell(this)" /></td>

и обработчик:

function colorMyCell(inp) { 
    // get reference to the row 
    var tr = inp.parentNode.parentNode; 
    // put the TD children of the row into an array 
    var cells = tr.getElementsByTagName("TD"); 
    // bgcolor all the other cells in that row white 
    for (var i=0; i<cells.length; i++) { 
     cells[i].style.backgroundColor = "#ffffff"; 
    } 
    // now bgcolor the selected cell differently 
    inp.parentNode.style.backgroundColor = "#ffffcc"; 
}

Обратите внимание, что это просто быстрый и грязный пример того, как это сделать. Вы бы хотели больше заботиться об этом (убедитесь, что inp.parentNode.parentNode действительно является TR, если не найти лучший способ проложить путь вверх по дереву, чтобы найти фактический TR-файл-предшественник), а также использовать CSS classNames вместо прямого задания цветов фона и т. д.

источник

2010-02-16 22:15:26 Robusto

Как определить радиокнопку в javascript

ответ

Смежные вопросы