Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Есть ли какая-то компонента на замену select?

Мне надо сделать страницу с которой будут работать с iPhone.
Но там очень неудобно работать с элементом select.
Есть ли в jQuery что-то на замену select? (желательно с возможностью делать мультиселект с айфона)
Ответ: Посмотри bootstrap и плагин для него bootstrap-select очень хорошо адаптированы под мобильники.
Вопрос: замена select, onchange на a href, onclick

Всем привет! Подскажите возможно ли такое?

Есть выпадающий список который генерируется средствами PHP и при выборе значения по onchange="this.form.submit()" происходит сортировка элементов на странице в зависимости от выбранного value

Как мне сделать ссылку для того чтобы она осуществляла теже функции что и выпадающий список но передавало одно занчение (value="12")

Пробовал так:

<a href="#"  id="catordering" name="catordering" onclick="this.form.submit() return false;" value="12">Упорядочить по оценкам</a>


- но ничего не вышло

В чем моя ошибка или я что-то упустил?

вывод выпадающего списка я отключал в коде.

Подскажите как мне решить данную задачу?

пример с выпадающим списком который работает но он неудобен:

<select id="catordering" name="catordering" class="inputbox" size="1" onchange="this.form.submit()">ev
<option value="6">по дате</option>
<option value="12" selected="selected">по голосам</option>
<option value="16">по просмотрам</option>
</select>
Ответ: Чтобы генерить ссылки надо написать или найти генератор ссылок, который поддерживает уже существующий набор параметров, добавляет к ним новые или удаляет которые не нужны. Тогда с любого места скрипта на сервере вы делаете какие угодно ссылки без всяких форм и списков.

Например класс сортировки добавил свой ключик o=dd, класс пагинации нагенерил ссылок с этим ключиком, в то время как класс сортировки выкинул ключик p (page), потому что новая сортировка должна начинаться со страницы 1, иначе у юзера башню снесет.
Вопрос: Связать два и более <select>

Доброго времени!
Не могу понять, как выполнить слияние двух <select>
<div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 300px;">
<input class="wicartoptional" checked="" type="radio" value="1000" name="psbs" data-good-id="002" data-subid="psbswall" data-option-name="Стеновая ПСБС">Стеновая (+1000)<br>
<input class="wicartoptional" type="radio" value="2000" name="psbs" data-good-id="002" data-subid="psbsroof" data-option-name="Кровельная ПСБС">Кровельная (+2000)<br>
</div>



<div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 300px;">
Толщина: <select class="wicartoptional" data-good-id="002"  name="tol">
		<option value="100" data-subid="50" data-option-name="Толщина:50" selected>50 (+100)</option>
		<option value="200" data-subid="75" data-option-name="Толщина:75" >75 (+200)</option>
		<option value="300" data-subid="100" data-option-name="Толщина:100" >100 (+300)</option>
		<option value="300" data-subid="150" data-option-name="Толщина:150" >150 (+300)</option>
</select></div>	

<div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 300px;">
Длина: <select class="wicartoptional" data-good-id="002" name="dlin">
		<option value="1000" data-subid="36" data-option-name="Длина:3:6" selected>Первый (+1000)</option>
		<option value="2000" data-subid="34" data-option-name="Длина:3:4">Второй (+2000)</option>
		<option value="3000" data-subid="612" data-option-name="Длина:6:12">Третий (+3000)</option>
</select></div>


Нужно, чтобы при выборе radiobutton Стеновая в 1 <select> было 50,75,100,150
НО
во втором при выборе 50 и 75 было только 3:6
и при выборе 100 и 150 было только 3:4 и 6:12
===========
RADIOBUTTON 2 Кровельная
<select> 1 50.75.100.150
<select> 2 при значении первого 50 = 6, 75 = 6:12, 100= 6:12 150 = 6:12
HElP!!!
Ответ: Meattale,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
window.addEventListener("DOMContentLoaded", function() {
    [].forEach.call( document.querySelectorAll('.sel'), function(el) {
    var inputs = el.querySelectorAll("input.wicartoptional"),
        selects = el.querySelectorAll("select.wicartoptional"),
        ops = selects[1].querySelectorAll("option"),
        obj = {
            0: {
                0: [0],
                1: [0],
                2: [1, 2],
                3: [1, 2]
            },
            1: {
                0: [0],
                1: [2],
                2: [2],
                3: [2]
            }
        },
        op = obj[0];

    function change() {
        var i = selects[0].selectedIndex || 0;
        i = op[i];
        selects[1].options.length = 0;
        i.forEach(function(o) {
            selects[1].appendChild(ops[o])
        })
    }
    selects[0].addEventListener("change", change);
    [].forEach.call(inputs,
        function(input, i) {
            if(input.checked) {op = obj[i];
            el.querySelector(".im").src = ["http://javascript.ru/forum/images/smilies/dance3.gif","http://javascript.ru/forum/images/smilies/victory.gif"][i]; change();
            }
            input.addEventListener("change", function() {
                el.querySelector(".im").src = ["http://javascript.ru/forum/images/smilies/dance3.gif","http://javascript.ru/forum/images/smilies/victory.gif"][i];
                input.checked && (op = obj[i]);
                change()
            })

        })

    });
});
  </script>
</head>

<body>  <div class="sel">
 <img class="im" src="url" />
 <div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 300px;">
<input class="wicartoptional" checked="" type="radio" value="1000" name="psbs" data-good-id="002" data-subid="psbswall" data-option-name="Стеновая ПСБС">Стеновая (+1000)<br>
<input class="wicartoptional" type="radio" value="2000" name="psbs" data-good-id="002" data-subid="psbsroof" data-option-name="Кровельная ПСБС">Кровельная (+2000)<br>
</div>
<div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 300px;">
Толщина: <select class="wicartoptional" data-good-id="002"  name="tol">
    <option value="100" data-subid="50" data-option-name="Толщина:50" selected>50 (+100)</option>
    <option value="200" data-subid="75" data-option-name="Толщина:75" >75 (+200)</option>
    <option value="300" data-subid="100" data-option-name="Толщина:100" >100 (+300)</option>
    <option value="300" data-subid="150" data-option-name="Толщина:150" >150 (+300)</option>
</select></div>

<div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 300px;">
Длина: <select class="wicartoptional" data-good-id="002" name="dlin">
    <option value="1000" data-subid="36" data-option-name="Длина:3:6" selected>Первый (+1000)</option>
    <option value="2000" data-subid="34" data-option-name="Длина:3:4">Второй (+2000)</option>
    <option value="3000" data-subid="612" data-option-name="Длина:6:12">Третий (+3000)</option>
</select></div>
</div>
<div class="sel">
   <img class="im" src="url" />
 <div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 300px;">
<input class="wicartoptional" checked="" type="radio" value="1000" name="psbs2" data-good-id="002" data-subid="psbswall" data-option-name="Стеновая ПСБС">Стеновая (+1000)<br>
<input class="wicartoptional" type="radio" value="2000" name="psbs2" data-good-id="002" data-subid="psbsroof" data-option-name="Кровельная ПСБС">Кровельная (+2000)<br>
</div>
<div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 300px;">
Толщина: <select class="wicartoptional" data-good-id="002"  name="tol">
    <option value="100" data-subid="50" data-option-name="Толщина:50" selected>50 (+100)</option>
    <option value="200" data-subid="75" data-option-name="Толщина:75" >75 (+200)</option>
    <option value="300" data-subid="100" data-option-name="Толщина:100" >100 (+300)</option>
    <option value="300" data-subid="150" data-option-name="Толщина:150" >150 (+300)</option>
</select></div>

<div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 300px;">
Длина: <select class="wicartoptional" data-good-id="002" name="dlin">
    <option value="1000" data-subid="36" data-option-name="Длина:3:6" selected>Первый (+1000)</option>
    <option value="2000" data-subid="34" data-option-name="Длина:3:4">Второй (+2000)</option>
    <option value="3000" data-subid="612" data-option-name="Длина:6:12">Третий (+3000)</option>
</select></div>
</div>
</body>
</html>
Вопрос: Передать значение input radio в другой input

Имеется каталог товаров.

У каждого товара есть варианты выбора в виде input type="radio".

Также у каждого товара есть кнопка "заказать" по нажатию на которую появляется форма обратной связи содержащая скрытый инпут.

Форма обратной связи вызывается для всех товаров одна и та же.

ID и label для инпутов генерируются скриптом

<script>
        $(function getValue() {
            $('input[type="radio"]').each(function(indx, el){
                $(this).next().attr("for" , "radio"+indx)
                this.id = "radio"+indx
                var id = "radio"+indx

            });
        });
    </script>



сами инпуты:
<div class="wrapper_all_radio">
                                <div class="radio_wrapper">
                                    <input type="radio" id="radio" name="radio" />
                                    <label for="radio"><span></span>23 см</label><span class="price_tovar_item">8.5 руб.</span>
                                </div>
                                <div style="clear: both"></div>
                                <div class="radio_wrapper">
                                    <input type="radio"  id="radio" name="radio" />
                                    <label for="radio"><span></span>30 см</label><span class="price_tovar_item">30 руб.</span>
                                </div>
                                <div style="clear: both"></div>
                                <div class="radio_wrapper">
                                    <input type="radio" id="radio" name="radio" />
                                    <label for="radio"><span></span>36 см</label><span class="price_tovar_item">15 руб.</span>
                                </div>
                            </div>



кнопка заказать:

<a class="tovar_item_link">заказать</a>


Собственно вопрос - как передать значение выбранного инпута в форму?
Ответ:
Сообщение от alex-tiesto
Пример скрипта можете написать?
Вы сперва разберитесь с багами существующего кода. )

То есть, если по уму, без глупостей "Название пиццы 1" и подобных, то не только серверу легче будет, но и клиенте, так как ему придется оперировать не с кучей абстрактных наборов ID и классов, а всего лишь с элементами текущей формы, коих немного и они конкретно определены. А значит "пример кода" будет базироваться совсем на ином.

Код написанный требует отладки, и если бы вы такое делали, то в коде под jQuery 1.11.0 такого бы не было, сразу после первой же отладки:

$(".radio_wrapper").live("change", function() {
        $("#value_product_2").val($(this).find("input[type=radio]:checked").attr("value"));
    });


Так как метода .live() в этой версии JQ нет. Но даже если бы и был, или же как положено для этой версии использовался метод .on(), сама по себе задача описывающее это мягко выражаясь глупа для этого HTML:

<div class="wrapper_all_radio0">
                            <div class="radio_wrapper">
                                <input id="radio0" name="wrapper_all_radio0" value="23 см" type="radio">
                                <label for="radio0"><span></span>23 см</label><span class="price_tovar_item">8.5 руб.</span>
                            </div>
                             <div style="clear: both"></div>
                            <div class="radio_wrapper">
                                <input id="radio1" name="wrapper_all_radio0" value="30 см" type="radio">
                                <label for="radio1"><span></span>30 см</label><span class="price_tovar_item">30 руб.</span>
                            </div>
                            <div style="clear: both"></div>
                            <div class="radio_wrapper">
                                <input id="radio2" name="wrapper_all_radio0" value="36 см" type="radio">
                                <label for="radio2"><span></span>36 см</label><span class="price_tovar_item">15 руб.</span>
                            </div>
                            </div>


В данном случае нужно делегировать обработку изменения состояний кнопок их общему родителю wrapper_all_radio, убрав добавление к этим именам классов числовых значений, это пустое и не нужное.

Назначать же обработчики как впрочем и описывать все остальное, нужно не кучей кусков <script></script>, а в одном скрипте, по событию $(function().

А помещать $(????).find("input[type=radio]:checked").attr("value"), только не attr, а .val(), ибо это не атрибут, а свойство, во что-то нужно в обработчике щелчка по кнопке заказать:

$(function() {
    $('a.tovar_item_link').click(function() {
        $(this).closest('tovar_desc').find('input:radio:checked').val(); //это выбранное значение в текущей группе кнопок
        $("#value_product_2"). //а это что за хрень?
    });
})
Вопрос: Переключение radio-кнопок определенное количество раз

<p> ПЕРВЫЙ БЛОК </p>
<input type="radio" name="t1" id="q1" /><label for="q1">1</label><br />
<input type="radio" name="t1" id="q2" /><label for="q2">2</label><br />
<input type="radio" name="t1" id="q3"/><label for="q3">3</label><br />
<input type="radio" name="t1" id="q4" /><label for="q4">4</label><br />
<input type="radio" name="t1" id="q5" /><label for="q5">5</label><br />

<p> ВТОРОЙ БЛОК </p>
<input type="radio" name="t2" id="q11" /><label for="q11">1</label><br />
<input type="radio" name="t2" id="q22" /><label for="q22">2</label><br />
<input type="radio" name="t2" id="q33"/><label for="q33">3</label><br />
<input type="radio" name="t2" id="q44" /><label for="q44">4</label><br />
<input type="radio" name="t2" id="q55" /><label for="q55">5</label><br />

<p> ТРЕТИЙ .... и т.д.


Каким образом можно реализовать так, что бы переключить radio кнопку можно было не больше 2 раз в блоке? p.s. Не нашел инфы, даже, о том, как вообще запретить смену радиокнопок, не то что отследить их смену
Ответ: k_DizeL,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var a = $(".bg");
    a.each(function(d, b) {
        $(b).on("click", "input", function() {
            $(this).addClass("bl");
            a.each(function(a, b) {
                var c = $("input", b);
                c.prop("disabled", c.filter(".bl").length > +(a == d))
            })
        })
    })
});
  </script>
</head>

<body>

<p> ПЕРВЫЙ БЛОК </p><div class="bg">
<input type="radio" name="t1" id="q1"  /><label for="q1">1</label><br />
<input type="radio" name="t1" id="q2" /><label for="q2">2</label><br />
<input type="radio" name="t1" id="q3"/><label for="q3">3</label><br />
<input type="radio" name="t1" id="q4" /><label for="q4">4</label><br />
<input type="radio" name="t1" id="q5" /><label for="q5">5</label><br />
</div>
<p> ВТОРОЙ БЛОК </p><div class="bg">
<input type="radio" name="t2" id="q11" /><label for="q11">1</label><br />
<input type="radio" name="t2" id="q22" /><label for="q22">2</label><br />
<input type="radio" name="t2" id="q33"/><label for="q33">3</label><br />
<input type="radio" name="t2" id="q44" /><label for="q44">4</label><br />
<input type="radio" name="t2" id="q55" /><label for="q55">5</label><br />
</div>


</body>
</html>
Вопрос: Определить значение value type="radio"

Прошу помочь
есть HTML код
<div id="myform">
<input type="radio" id="radio" name="drink" value="1"   />Розница | 
<input type="radio" id="radio" name="drink" value="2"  />Опт1 | 
<input type="radio" id="radio" name="drink" value="3"  />Опт2
</div>
<input type="number"  data-action="13" value=""  id="contstrix" name="name" max="13"  />


Как мне написать два условия в js
первое условие если не выбран не один из вариантов radio то input с id="contstrix" будет не активным
второе условие это получить value="" выбранной радио кнопки
Ответ:
<div id="myform">
    <input type="radio" class="radio" name="drink" value="1"   />Розница |
    <input type="radio" class="radio" name="drink" value="2"  />Опт1 |
    <input type="radio" class="radio" name="drink" value="3"  />Опт2
</div>
<input type="number"  data-action="13" value=""  id="contstrix" name="name" max="13" disabled="disabled"  />

<script>
    [].forEach.call(document.querySelectorAll('.radio'), function(item) {
        item.addEventListener('change', function() {
            var inpNum = document.getElementById('contstrix');
            inpNum.removeAttribute('disabled');
            inpNum.value = item.value;
        });
    });
</script>
Вопрос: Кастомизация radio button

Ребят, помогите кастомизировать радио кнопки.

Вот простой код:

<style type="text/css">
   .checkbox-checked {
    background: #FFCC00;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(window).load(function() {
//проверяет при загрузке страницы, отмечен чекбокс или нет и на отмеченные чекбоксы вешает класс.
    $('input[type="radio"]').each(function () {
        if ($(this).prop('checked')) {
            $(this).parent().addClass('checkbox-checked');
        }
     });

  //по клику лейблу присваивается или удаляется класс, в зависимости от того, что в атрибуте "checked".
    $('input[type="radio"]').bind("change", function(){
      if ($(this).is(":checked")) {
          $(this).parent('label').addClass('checkbox-checked');
      }
      else {
         $(this).parent('label').removeClass('checkbox-checked');
      };
    });
})

  </script>
    
<label><input name="name" type="radio"/>один</label>
<label><input name="name" type="radio"/>два</label>
<label><input name="name" type="radio"/>три</label>
<label><input name="name" type="radio"/>четыре</label>



При выборе любой кнопки к ней применяется стиль checkbox-checked и она подсвечивается желтым цветом. Как сделать так, чтобы только к выбранной кнопке применялся стиль checkbox-checked, а с других кнопок сбрасывался? Сейчас получается так, что если пройтись по всем кнопкам, они будут все подсвечены желтым цветом.
Ответ:
Сообщение от destus
kos0760,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <style type="text/css">
        .checkbox-checked {
            background: #FFCC00;
        }
    </style>
    <script>
     $(document).ready(function () {
         $('label').click(function () {
             $('label').removeClass('checkbox-checked');
             $(this).addClass('checkbox-checked');
         });
     });
    </script>
    <label><input name="name" type="radio" />один</label>
    <label><input name="name" type="radio" />два</label>
    <label><input name="name" type="radio" />три</label>
    <label><input name="name" type="radio" />четыре</label>
Невероятно! Так просто! Но походу не для моих мозгов. Спасибо большое! Уже применил на сайте.
Вопрос: input radio - как узнать выбранный пункт?

Есть input radio:

<label class="control-label">Отзыв о…</label>
    <p>
        <input type="radio" name="review_type" value="1" id="review_type1" checked> Работе в компании<br />
        <input type="radio" name="review_type" value="2" id="review_type2"> Зарплате на должности<br />
        <input type="radio" name="review_type" value="3" id="review_type3"> Собеседовании<br />
        <input type="radio" name="review_type" value="4" id="review_type4"> Бонусах в компании<br />
    </p>


Пытаюсь определить выбранный пункт таким способом:
window.onload = function(){
    var rt1 = document.getElementById('review_type1');
    var rt2 = document.getElementById('review_type2');
    var rt3 = document.getElementById('review_type3');
    var rt4 = document.getElementById('review_type4');

    if (rt1.checked) {
        alert('Выбран 1 пункт');
    }
    if (rt2.checked) {
        alert('Выбран 2 пункт');
    }
    if (rt3.checked) {
        alert('Выбран 3 пункт');
    }
    if (rt4.checked) {
        alert('Выбран 4 пункт');
    }
};


JS сообщает о пункте выбранном по умолчанию, при загрузке страницы, но если изменить выбор - никакой реакции от JS нет.

При этом, в инструкциях которые видел, везде предлагают проверять через checked. Спрашивается... что я делаю не так? Или, чтобы отслеживать выбор в реальном времени - нужно еще событие клика ловить?

Просьба подсказать на понятном новичку языке.
Ответ:
<p>
        <input type="radio" name="review_type" value="1"  checked> Работе в компании<br />
        <input type="radio" name="review_type" value="2"> Зарплате на должности<br />
        <input type="radio" name="review_type" value="3"> Собеседовании<br />
        <input type="radio" name="review_type" value="4"> Бонусах в компании<br />
</p>
<script>
   document.querySelector('p').onclick = function(e) {
    alert(e.target.value);
  }
</script>
Вопрос: поменять цвет radio button

как поменять цвет radio button ?
Ответ:
<!DOCTYPE html>
<html>
<head>
<title>Самодельный radiobutton</title>
<style type="text/css">
* {font:11px Verdana,Arial;}
input[type="radio"] {
position:absolute;
left:-9999px;
}
input[type="radio"] + span {
padding-left:16px;
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAA6UlEQVR42nWS74qCQBTFff21p/AZ+lLLCpsERSkumaAMgR/8IAUl+AB3+R2YoTZ34DB6zzn3z8xE0dNKksTixeIFxKK59RHHtlqvrW1bG8dR4JsY3Js4yzK73m623R1tuUqF3aFQDC6YKEmWYRgk+vre2r44CZj5x4RG7eF0zolMs72Exc/Z6saZu3RWVZWARlUYjH7JjrCqG5F936sqKMtSGrTB8JlulLXrOonu90cACdiDgYDP7sXTNAn0TwyNDH5oiDzPVcEbqEycPQz9fKwQGHz/3vhyrHMX59uhjdmL++9pIPz7NH4B18qNZO9hj3YAAAAASUVORK5CYII=') no-repeat 0 1px;
}
input[type="radio"]:checked + span {
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAABUElEQVR42mNgQALTFyz9n9k67X9oywIwBrFBYgzYQErL9P99247/33Pnyf9bX7+DMYgNEgPJYSieffD8/0uff/6fePrN/6R5x8AYxAaJgeTgmkBWgkw59+Hn/9RFp/+ruif+d02u/G8SmP5f1j4SLAaSA6kBOw/kTpDVINOUnWP+z955+v+Lb3//1z19+1/ENfm/jG34/xmX3oHVgNQygDwHcm/krD3/9b3i/m/4+vN/8b9//w1P/vsvs/LTf3Ej9//ZC/aD1YDUomgASWqu//hf/fC//7J7//0XXPgRLFa55MD/65+//g9vnvufIaN1OtxJIOtBzgAp5Jn/6T+PUxpYbO99iJNAasGenrD9BNhjGavOghWIG3uCMYgN8hPIBSA18DhBDtZ1N9/8790ElNx28v+xR2//3/mOFqzIcQEyBWQ1SBEIg9ggMQzFpCQNAK7TVNaTo7+RAAAAAElFTkSuQmCC') no-repeat 0 1px;
}
</style>
</head>
<body>
<br>
<label><input type="radio" name="r1"><span>Первый radiobutton</span></label>
<br><br>
<label><input type="radio" name="r1"><span>Второй radiobutton</span></label>
<br><br>
<label><input type="radio" name="r1" checked><span>Третий radiobutton</span></label>
<br><br><br>
В зависимости от размера шрифта, надо в *<span style="font:14px arial;">input[type="radio"] + span {background...} no-repeat 0
<span style="font:700 14px arial;">1px;</span></span> *
поменять на *<span style="font:14px arial;">no-repeat 0 <span style="font:700 14px arial;">2px;</span></span>* и т.д. методом подбора

</body>
</html>
Вопрос: JQuery выбор radio в строке таблицы

подскажите пожалуйста как можно максимально кратно в JQuery помечать input radio в строке таблицы, которую выбрали мышкой по любой из ячеек
событие на table onclick повесил, но как найти этот input в строке!?
кучу примеров уже пересмотрел толком ничего не работает (
Ответ:
ShSerge
<html>
<body>
<table border="1">
 <tr><td><input type="radio" name="gr1" checked="checked" value="1"></input></td><td>odin1</td></tr>
 <tr><td><input type="radio" name="gr1" value="2"></input></td><td>dva</td></tr>
 <tr><td><input type="radio" name="gr1" value="3"></input></td><td>tri</td></tr>
</table>
</body>
</html>


Да уж... .

что за код?
<input type="radio" name="gr1" value="2"></input>

да и у ТС клик должен быть по любой ячейки (то бишь по строке)