Confirm the form to ensure that at least one switch is installed in the group

Question

I am making a form with switches in it. I can check all other input except the switch. I got an acceptable solution for this on this site.

Using jQuery to check if a switch is set in a group

but it does not work for me

http://jsfiddle.net/ghan_123/trr185L2/2/

my code

<input type='radio' name='datetime' value='1'>1 <input type='radio' name='datetime' value='2'>2 <input type='radio' name='datetime' value='3'>3 <input type='radio' name='datetime' value='4'>4 <input type='radio' name='datetime' value='5'>5 <br><button id='buttonnew'>validate</button> 

JQuery

 $(document).ready(function(){ $("#buttonnew").click(function(){ var selection=document.querySelector('input[name="datetime"]:checked').value; // my method if(selection=='') { alert('please select a value'); } else { alert('your selected value is '+selection); } // end my method // other method ( given in this site link above) if (!$("input[name='datetime']:checked").val()) { alert('Nothing is checked!'); } else { alert('One of the radio buttons is checked!'); } // end other method }); }); 

when nothing is checked, a warning message does not appear. otherwise, both give a warning message to select one of them.

Answer 1

The problem here was that you were trying to get the value radio buttons when none were checked , and it used the console error for you. So first you need to check if there is anything checked , and if so, assign the value else to set the value to empty, as shown below:

Demo

 $(document).ready(function(){ $("#buttonnew").click(function(){ var selection=document.querySelector('input[name="datetime"]:checked')!=null? document.querySelector('input[name="datetime"]:checked').value:""; //Conditional operator if(selection!='') { alert('your selected value is '+selection); } else { alert('please select a time slot'); } }); }); 

Answer 2

Try it. I think you need something like this.

 $(document).ready(function(){ $("#buttonnew").click(function(){ var chek=document.querySelector('input[name="datetime"]:checked'); if(chek!=null){ var selection=document.querySelector('input[name="datetime"]:checked').value; console.log(selection); // my method if(selection=='') { alert('please select a time slot'); } else { alert('your selected value is '+selection); } } // end my mehod // other method if (!$("input[name='datetime']:checked").val()) { alert('Nothing is checked!'); } else { alert('One of the radio buttons is checked!'); } // end other method }); }); 

Jsfiddle example: http://jsfiddle.net/ghan_123/trr185L2/2/

Answer 3

Just use this solution:

 $(document).ready(function () { $("#buttonnew").click(function () { // variable for increament value var inc = 0; // loop over all of radio button $('[name="datetime"]').each(function () { // if any of radio button was checked // then increase inc variable to one value if ($(this).is(':checked')) inc++; }); // if variable stay with 0 value // so, we know that no radio button was clicked if (inc == 0) { alert('Please check one'); return; } // continue your another action }); }); 

Demo