Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как отследить изменение radio? (https://javascript.ru/forum/events/44030-kak-otsledit-izmenenie-radio.html)

housewm 03.01.2014 11:36

Как отследить изменение radio?
 
Есть 2 кнопки radio

как сделать чтобы если выбранна 1я то было действие такое то, если вторая то действие другое

не могу понять как отследить изменение радио кнопок

housewm 03.01.2014 12:16

я наверное не правильно вопрос задал.

как правильно условие написать?

$("input:checked[name=answer]").change(function(){
    if($(this).val() == "yes"){
        $(".disp").css("color","red"); 
    };
});

housewm 03.01.2014 14:15

подскажите что не так

$(document).ready(function(){
        	$('#title').live('change', function(){
	          
				var op=$('#title').val();
				switch (op)
				{
					case 'Please select': $('.item-include').css("display","none");
					break;
					case '-------------': $('.item-include').css("display","none");
                    break;
					case 'Other': $('.item-include').css("display","block");
                    break;
				}
			});
        });

housewm 03.01.2014 14:26

а не работает, ничего не происходит

пробовыл вместо #title ставить input[name=title], тоже ничего не происходит

<div class="item1">
	<legend>Title</legend>
	<select name="title" id="title">
		<option value="Please select">Please select</option>
		<option value="-------------">-------------</option>
		<option value="Other">Other</option>
	</select>
	<div class="item-include">
	        <legend style="margin-top:10px">Other title</legend>
	        <input type="text" id="title-other">
	</div>
</div>

danik.js 03.01.2014 14:34

Цитата:

Сообщение от housewm
пробовыл вместо #title ставить input[name=title]

А где у тебя в коде <input> с name = title?

housewm 03.01.2014 14:36

делаю select[name=title], тоже ничего

housewm 03.01.2014 15:01

когда выбранно case 'Other': в списке

то диву с классом .item-include задается стиль display:block

во всех остальных случаях этот див display:none

housewm 03.01.2014 15:07

хм, почему тогда может не работать? я не пойму

housewm 03.01.2014 15:20

http://jsfiddle.net/#&togetherjs=1tztmrrlFo

housewm 03.01.2014 15:37

Вложений: 1
прикрепил файл

housewm 03.01.2014 15:43

http://jsfiddle.net/housewm/vVS7n/ щас должен быть код

danik.js 03.01.2014 17:13

jQuery подключи (там есть выпадающий списочек с либами). Причем старушку версии эдак 1.6, ибо live() устарел и был давно выпилен.

А лучше замени метод $('selector').live('change') на $(document).on('change', 'selector')

danik.js 03.01.2014 17:14

И приучи себя открывать консоль (F12) браузера.

yndx.tavria 03.01.2014 18:30

Кажется, что должно получится как-то так http://jsfiddle.net/tavriaforever/BrRjb/
Рекомендую почитать статью в учебнике про делегирование
http://learn.javascript.ru/event-delegation

TITO 05.01.2014 13:09

Здравствуйте. Прошу прощения у ТС за то, что влез в твой тред, но у меня та же проблема, мне нужно обработать все инпут радио на странице, но проблема в том, что я заранее не знаю сколько их будет, страница формируется не моими скриптами.
Пока решил проблему так
$(document).ready(function(){
	$(\'input:radio[name=jshop_attr_id11]\').change(function(){
			u=1;					
	});
});
$(document).ready(function(){
	$(\'input:radio[id=jshop_attr_id12]\').change(function(){
			u=2;					
	});
});
$(document).ready(function(){
	$(\'input:radio[id=jshop_attr_id15]\').change(function(){
			u=3;					
        });
});


Но это костыль, так как в данном случае удается обрабатывать только определенное количество инпутов, а как быть если на другой стрнице их будет 2 или 5. По name почему то вообще не работает, хотя имена у всех радио в моем случае одинаковы и формируются по аналогии с ид. Вот пример html кода который я хотел бы обработать.
<span id='block_attr_sel_1'>
<span class="input_type_radio">
<input type="radio" name="jshop_attr_id[1]" id="jshop_attr_id11" value="1" checked="checked" onclick="setAttrValue('1', this.value);"> 
<label for="jshop_attr_id11"><span class='radio_attr_label'>22</span></label></span>

<span class="input_type_radio">
<input type="radio" name="jshop_attr_id[1]" id="jshop_attr_id12" value="2" onclick="setAttrValue('1', this.value);">
<label for="jshop_attr_id12"><span class='radio_attr_label'>33</span></label></span>

<span class="input_type_radio">
<input type="radio" name="jshop_attr_id[1]" id="jshop_attr_id15" value="5" onclick="setAttrValue('1', this.value);"> 
<label for="jshop_attr_id15"><span class='radio_attr_label'>44</span></label></span>

<span class="input_type_radio">
<input type="radio" name="jshop_attr_id[1]" id="jshop_attr_id16" value="6" onclick="setAttrValue('1', this.value);"> 
<label for="jshop_attr_id16"><span class='radio_attr_label'>55</span></label></span>

Прошу помочь мне оформить приведенный мной код в функцию которая обрабатывала бы все инпут радио на странице я вижу решение что нужно по именам ее обработать, но как не пойму.
Забыл добавить, я из php могу вытащить все id и name у радиокнопок и подставить их в js, но все равно как то не пойму как организовать перебор именно функцией которая принимала бы ид кнопки и изменяла переменную внутри себя на заданное значение, так как писать 50 функций на каждую кнопку это не вариант и говнокод.

danik.js 05.01.2014 13:37

$('input[name="jshop_attr_id[1]"]')

Или, если они все в одной форме, то проще:
$('form input[type="checkbox"]')

Deff 06.01.2014 00:44

<script type="text/javascript">
$('input[name^="jshop_attr_id"]:radio').change(function(){
  alert(this.id)
  alert($(this).next('label').text())
});
</script>

Vlasenko Fedor 06.01.2014 01:55

$('#block_attr_sel_1').on('change', 'input', function () {
        alert(this.value);
});

JoomShoping - ненавижу

yndx.tavria 06.01.2014 13:04

Тогда уже так, отфильтровать селектор по имени инпутов
$('#block_attr_sel_1').on('change', 'input[name^=jshop_attr_id]:radio', function () {
        alert(this.value);
});

Vlasenko Fedor 06.01.2014 13:40

yndx.tavria,
вы знаете JoomShoping?
это вывод одного атрибута, все input внутри '#block_attr_sel_1' будут иметь одинаковое имя и тип. Фильтрация здесь лишняя

yndx.tavria 06.01.2014 19:03

С JoomShoping не знаком.
Хорошо, тогда можно отфильтровать все radio - чтобы событие делегировалось только на такие инпуты, а все остальные игнорировались.

kostyanet 08.01.2014 19:53

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

var myradios = form.getElementsByName(there_known_elements_name);


И вешайте их на любой осине.

Vlasenko Fedor 08.01.2014 20:15

Цитата:

Сообщение от kostyanet
И вешайте их на любой осине

kostyanet, а сколько вы их вешаете вы об этом подумали
сколько обработчиков событий в вашем примере будет

danik.js 09.01.2014 01:05

Poznakomlus, скоко навесишь, стоко и будет. Можно один. Можно мильен (но зачем).

Vlasenko Fedor 09.01.2014 02:42

Цитата:

Сообщение от danik.js
Можно один. Можно мильен

danik.js,
колличество навешенных обработчиков не влияют на скорость и память? Зачем эт наверное ТС скажет если появится.

kostyanet 09.01.2014 02:56

Цитата:

Сообщение от Poznakomlus
сколько обработчиков событий в вашем примере будет

Обработчик одного события в норме ровно один. Количество ссылок на него как я понял из запроса к гуглю не ограничено. Ну, думаю, пока винт не кончится можно вешать и вешать и вешать.

kostyanet 09.01.2014 03:03

А, вы наверно имели ввиду сам Event Object? Если интерпретатор не писали ламеры, то сам EO стопудово эшелонирован и кроме собственно юзерской даты в его инстансь ничего не добавляется.

Вообще впервые встречаю такую заботу о количестве векторов. Обычно народ вообще не парится. Шарашит на все подряд да еще и по нескольку раз.


Часовой пояс GMT +3, время: 22:27.