Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   input type="radio" Не дружат при множественном декларировании (https://javascript.ru/forum/dom-window/54749-input-type%3D-radio-ne-druzhat-pri-mnozhestvennom-deklarirovanii.html)

oslayer 30.03.2015 19:34

input type="radio" Не дружат при множественном декларировании
 
Есть вот такой код
<div id="result"></div>
<div id="result1"></div> 
<div class="rrr">
<input type="radio" name="selector_" value="post_active" id="posts" onclick="dataSelect23123()">Новость<br>
<input type="radio" name="selector_" value="page_active" id="pages" onclick="dataSelect23123()" >Страница
</div>
<br /><br />
<div class="rrr">
<label><input type="radio" name="selector_1" value="post_active1" id="posts1"onclick="dataSelect23124()" >Новость<br></label>
<label><input type="radio" name="selector_1" value="page_active1" id="pages1" onclick="dataSelect23124()">Страница</label>
</div>


<script>
function dataSelect23123() {
$( "#result" ).html( $('input:checked').val() + " is checked!" );
};
</script>

<script>
function dataSelect23124() {
$( "#result1" ).html( $('input:checked').val() + " is checked!" );
};
</script>

http://jsfiddle.net/u9ondfp8/ - Примерно вот так работает, ниже точное описание проблемы
Естественно подключена библиотека jquery.
Что происходит
1.Если переключать "радио" внутри группы name="selector_" при этом не трогая группу name="selector_1" скрипт работает

2.Если переключать "радио" внутри группы name="selector_1" при этом не трогая группу name="selector_2" скрипт работает

Основная проблема - переключили в группе name="selector_1" ну например "Radio - Страница" стала иметь атрибут (checked) и перешли в группу name="selector_" - здесь тоже все исправно работет. А вот при попытке переключатся опять в группе name="selector_1" - всё ,капец. Данные в #result1 не передаются.:cray:

Люди добрые помогите!!!! что делать не знаю, в JS не силен :(

krasovsky 31.03.2015 13:18

Сделать корректную разметку(html), и читать сообщения от jsfiddle в которых написано, что не надо сувать тег script а надо просто писать код в поле. И читать доку - $('input:checked') - в данном случае выбирает все инпуты на странице, и фильтрует по первому имеющему checked=true, поэтому когда в первой группе есть активный инпут - по какой бы ты группе не тыкал в дивах у тебя отображается именно активный инпут первой группы.
http://jsfiddle.net/u9ondfp8/3/

oslayer 31.03.2015 13:36

Спасибо за ответ! Приведённый пример работает. Но если у меня формируется таких групп n-ое количество. В таком случае должна быть одна функция а не несколько, как в таком случае передавать значение name="", в Вашем примере имена прописаны внутри функции. Как такое реализовать?
И читать доку - $('input:checked') - Если можно ссылку на эту самую доку. Буду очень признателен

ksa 31.03.2015 14:08

Цитата:

Сообщение от oslayer
И читать доку - $('input:checked') - Если можно ссылку на эту самую доку. Буду очень признателен

Дык!
http://jquery-docs.ru/Selectors/checked/

krasovsky 31.03.2015 14:55

Цитата:

Сообщение от oslayer
как в таком случае передавать значение name="", в Вашем примере имена прописаны внутри функции.

В твоем случае, когда ты на каждый инпут вешаешь функцию вообще получается что ты тыкаешь по инпуту, который теперь и будет активным, и вставляешь его valueв див. В таком случае можешь передавать в функцию параметр $(this) - onclick="dataSelect23123($(this))"
dataSelect23124 = function (el) {
$( "#result1" ).html( el.val() + " is checked!" );
};


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