Форум

dry fig · #1 (**permalink**) 25.03.2016, 09:44

Дано: кнопка и некая функция, которая вызывается по нажатию этой кнопки. Вопрос: как к вызову функции по событию "прикрутить" радиокнопку?

<html>
<body>
<button id="but_id">click me</button>
<input type=radio name='radiobutton' value="1" id="labeled_1" checked/>
<input type=radio name='radiobutton' value="2" id="labeled_2"/>
</body>

<script>
function myAlert() {
alert("Функция вызвана");
}

var stateRadio = document.getElementById('labeled_1').value; // состояние радиокнопки

// радиокнопку надо "прикрутить" на условие вызова функции как-то так:
<stateRadio==1> И <but_id.onclick> = myAlert;

</script>
</html>

P.S. Не стреляйте в нуба - он пишет как умеет )

Strongman · #2 (**permalink**) 25.03.2016, 10:05

//радиокнопку надо "прикрутить" на условие вызова функции:
but_id.onclick = myAlert;
labeled_1.onclick = myAlert;
labeled_2.onclick = myAlert;

dry fig · #3 (**permalink**) 25.03.2016, 10:17

Strongman,
Может быть, я недостаточно точно сформулировал свой вопрос. Мне надо, чтобы функция вызывалась только в случае, если радиокнопка в определенном состоянии И нажата кнопка. В Вашем случае реализовано по "ИЛИ".

destus · #4 (**permalink**) 25.03.2016, 10:30

<button id="but_id">click me</button>
    <input type=radio name='radiobutton' value="1" id="labeled_1" />
    <input type=radio name='radiobutton' value="2" id="labeled_2" />
    <script>
        document.getElementById('but_id').onclick = function () {
            !!document.querySelector('input[type=radio]:checked') && alert("Функция вызвана");
        }
    </script>

dry fig · #5 (**permalink**) 25.03.2016, 10:54

destus, спасибо.
А как сделать то же самое, но:
а) используя не querySelector, а только id?
б) чтобы решение имело вид <событие onclick кнопки> И <value радиокнопки==1> = вызов функции;

destus · #6 (**permalink**) 25.03.2016, 11:26

Цитата:

А как сделать то же самое, но:
а) используя не querySelector, а только id?

<button id="but_id">click me</button>
    <input type=radio name='radiobutton' value="1" id="labeled_1" />
    <input type=radio name='radiobutton' value="2" id="labeled_2" />
    <script>
        document.getElementById('but_id').onclick = function () {
            (!!(document.getElementById('labeled_1').checked || document.getElementById('labeled_2').checked)) && alert("Функция вызвана");
}
    </script>

Цитата:

б) чтобы решение имело вид <событие onclick кнопки> И <value радиокнопки==1> = вызов функции;

<button id="but_id">click me</button>
    <input type=radio name='radiobutton' value="1" id="labeled_1" />
    <input type=radio name='radiobutton' value="2" id="labeled_2" />
    <script>
        document.getElementById('but_id').onclick = function () {
            var radio = document.getElementsByName('radiobutton');
            if ([].some.call(radio, function (el) {
                if (el.checked && +el.value === 1)
                    return true;
            }))
                alert("Функция вызвана");
        }
    </script>

dry fig · #7 (**permalink**) 25.03.2016, 11:37

destus, но у Вас радиокнопка проверяется в теле функции, а мне надо наоборот, снаружи:
<stateRadio==1> И <but_id.onclick> = myAlert;
И обращаться к радиокнопке надо не по имени, а по id.

newcoolguru · #8 (**permalink**) 25.03.2016, 12:41

but_id.onclick = function(){
  labeled_1.checked && alert(1)
}

Dilettante_Pro · #9 (**permalink**) 25.03.2016, 13:58

Сообщение от dry fig

destus, но у Вас радиокнопка проверяется в теле функции, а мне надо наоборот, снаружи:
<stateRadio==1> И <but_id.onclick> = myAlert;
И обращаться к радиокнопке надо не по имени, а по id.

Выбранная радиокнопка - это состояние, а нажатие на кнопку - это событие, поэтому состояние радиокнопок проверяется внутри обработчика события нажатия на кнопку.

Strongman · #10 (**permalink**) 26.03.2016, 13:45

Сообщение от newcoolguru

but_id.onclick = function(){
  labeled_1.checked && alert(1);}

Так как у Вас не работает, вот так работает:

but_id.onclick = function(){
if(labeled_1.checked) myAlert();}

Форум

Справочник

Discord чат

Курсы javascript