CODEWITHSUNDEEP
javascripthtmljquery
ForeverTwoWheels
ForeverTwoWheels

Reputation: 17

Javascript radio group by button

How to display an alert msg when all radio button checked to no? I only know check radio by individual only.

//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

Upvotes: 1

Views: 688

Answers (4)

Makwana Prahlad
Makwana Prahlad

Reputation: 967

@ForeverTwoWheels

Please try this code,To Javascript radio group by button

<!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>

I hope this information will be usefull for you. Thank you.

Upvotes: 0

msg
msg

Reputation: 8181

In case you have an indeterminate number of inputs you can collect the values for every group and then check if all values match

$("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

Upvotes: 0

brk
brk

Reputation: 50346

You can use a common class for all radio button with no value and a javascript array every method.

This line const radioNames = [...document.getElementsByClassName('no')]; will get all the radio button with no value ... is spread operator and will convert collection so that array method can be used on that collection.

This line item.addEventListener('change', checkIfAllNo) will attach event change to radio button with value no so that it checks the value for all other radio button

Array method every will return true if all the value in that array satisfies the condition.

So in this line radioNames.every(item => {return item.checked;}); if all the radio button with no value is checked then isAllFalse will be true & the alert will be triggered.

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

Upvotes: 1

Andriy Petrusha
Andriy Petrusha

Reputation: 129

In this case you should check something like this

$('#some_button').click( function(){
  if ($('input[type="radio"][value="n"]:checked').length == 3) {
    alert('Yes');
  }
});

Upvotes: 2

Related Questions