Javascript радио группа по кнопке - PullRequest
Новая
       4

Javascript радио группа по кнопке

1 голос
/ 27 апреля 2020

Как отобразить сообщение с сообщением, когда все переключатели отмечены на no? Я знаю, проверять радио только по отдельным лицам. 

//I only know this method
$('#attraction1').change( function(){
  if ($(this).is(':checked')) {
    alert('Yes');
  }
});
Attraction : 
  <input type="radio" id="attraction1" name="attraction" value="y" checked/> Yes
  <input type="radio" id="attraction2" name="attraction" value="n" /> No
<br>
Individual Attraction :
  <input type="radio" id="individual1" name="individual" value="y" checked/> Yes
  <input type="radio" id="individual2" name="individual" value="n" /> No
<br>
Plan Board: 
  <input type="radio" id="planBoard1" name="planBoard" value="y" checked/> Yes
  <input type="radio" id="planBoard2" name="planBoard" value="n" /> No

Ответы [ 4 ]

2 голосов
/ 27 апреля 2020

В этом случае вы должны проверить что-то вроде этого 

$('#some_button').click( function(){
  if ($('input[type="radio"][value="n"]:checked').length == 3) {
    alert('Yes');
  }
});
1 голос
/ 27 апреля 2020

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

Эта строка const radioNames = [...document.getElementsByClassName('no')]; получит все переключатели со значением no ... является оператором распространения и преобразует коллекцию, чтобы в этой коллекции можно было использовать метод массива.

Эта строка item.addEventListener('change', checkIfAllNo) прикрепит событие change к переключателю со значением no, чтобы он проверял значение для всех других переключателей

Метод массива every вернет true, если все значение в этом массиве удовлетворяет условию.

Таким образом, в этой строке radioNames.every(item => {return item.checked;});, если отмечены все переключатели со значением no, тогда isAllFalse будет истинным и будет активировано предупреждение. 

const radioNames = [...document.getElementsByClassName('no')];

function checkIfAllNo() {
  const isAllFalse = radioNames.every(item => {
    return item.checked;
  });
  if (isAllFalse) {
    alert('All False')
  }
}
radioNames.forEach((item) => {
  item.addEventListener('change', checkIfAllNo)
})
<input type="radio" id="attraction1" name="attraction" value="y" checked/> Yes
<input type="radio" class="no" id="attraction2" name="attraction" value="n" /> No
<br> Individual Attraction :
<input type="radio" id="individual1" name="individual" value="y" checked/> Yes
<input type="radio" id="individual2" class="no" name="individual" value="n" /> No
<br> Plan Board:
<input type="radio" id="planBoard1" name="planBoard" value="y" checked/> Yes
<input type="radio" id="planBoard2" class="no" name="planBoard" value="n" /> No
0 голосов
/ 27 апреля 2020

@ ForeverTwoWheels

Пожалуйста, попробуйте этот код, чтобы Javascript группировать радио по кнопке 

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Radio Buttons</title>
</head>
<body>
    <form>
        <input type="radio" name="choice" value="yes"> Yes
        <input type="radio" name="choice" value="no"> No
        <input type="button" id="btn" value="Show Selected Value">
    </form>
    <script>
        const btn = document.querySelector('#btn');
        // handle click button
        btn.onclick = function () {
            const rbs = document.querySelectorAll('input[name="choice"]');
            let selectedValue;
            for (const rb of rbs) {
                if (rb.checked) {
                    selectedValue = rb.value;
                    break;
                }
            }
            alert(selectedValue);
        };
    </script>
</body>
</html>

Я надеюсь, что эта информация будет полезна для вас. Спасибо.

0 голосов
/ 27 апреля 2020

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

$("input[type='radio']").change(function() {
  // Extract all the radio group names
  names = $.unique($('input[type="radio"]').map((v, e) => $(e).attr('name')))
  
  // Collect the value for each group.
  // Account for groups that are not selected yet
  vals = $.map(names, function(name) {
    return $(`input:radio[name="${name}"]:checked`).val() || 'undefined';
  })
  // Check if collected values match 'n'
  console.log(vals.every(v => v == 'n'))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Attraction :
<input type="radio" id="attraction1" name="attraction" value="y" /> Yes
<input type="radio" id="attraction2" name="attraction" value="n" /> No
<br> Individual Attraction :
<input type="radio" id="individual1" name="individual" value="y" /> Yes
<input type="radio" id="individual2" name="individual" value="n" checked/> No
<br> Plan Board:
<input type="radio" id="planBoard1" name="planBoard" value="y" checked/> Yes
<input type="radio" id="planBoard2" name="planBoard" value="n" /> No
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...