CODEWITHSUNDEEP
javascriptjquery
conan
conan

Reputation: 1337

Click one radio button and also detect the other radios unchecked, how to do it in my situation jquery?

I want to do an action when user click the first radio, it will also detect the other four unchecked. I face a challenge that I could not use if(!("...").is(':checked') one by one, any other way to achieve what I need, appreciate?

$('#first').click(function() {
		   
		   if ($('#first').is(':checked')) {
   		   alert('checked');
           }
  //I want to do an action here for the other four radio button like second alert('no check'), third alert('no check')....
  // but could not use this way 
  //if (!$('#second').is(':checked')) one by one. any other way?
   		 
  });
			
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="cureway" id="first" class="checker" />first
 <input type="radio" name="cureway" id="second" class="checker" />second
 <input type="radio" name="cureway" id="third" class="checker" />third
 <input type="radio" name="cureway" id="forth" class="checker" />forth
 <input type="radio" name="cureway" id="five" class="checker" />five

Upvotes: 1

Views: 86

Answers (4)

stanze
stanze

Reputation: 2480

Try this fiddle, you can select current radio ID attr. 

$('input:radio').click(function() {            
    var idAttr = $(this).attr('id');
    alert(idAttr);
});

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can use :not(:checked) selector to find unchecked radio buttons as shown below and use .each to iterate them all.

$('input[name="cureway"]').click(function() {
    //clicked button get selected by default so no need to check
    // if checked or not
	alert("checked button is : "+ this.id);  
    
    //all other unchecked buttons
    $('input[name="cureway"]:not(:checked)').each(function(){
      alert("Unchecked button is : "+this.id);
    });
   		 
  });
			
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="cureway" id="first" class="checker" />first
 <input type="radio" name="cureway" id="second" class="checker" />second
 <input type="radio" name="cureway" id="third" class="checker" />third
 <input type="radio" name="cureway" id="forth" class="checker" />forth
 <input type="radio" name="cureway" id="five" class="checker" />five

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You can have a single click handler for all the radio buttons with name cureway

$('input[name="cureway"]').click(function() {

  if (this.id == 'first') {
    alert('first')
  } else if (this.id == 'second') {
    alert('second')
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="cureway" id="first" class="checker" />first
<input type="radio" name="cureway" id="second" class="checker" />second
<input type="radio" name="cureway" id="third" class="checker" />third
<input type="radio" name="cureway" id="forth" class="checker" />forth
<input type="radio" name="cureway" id="five" class="checker" />five

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115222

Use this.checked

$('input.checker').click(function() {
  if (this.checked) {
    alert(this.id+' checked');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="cureway" id="first" class="checker" />first
<input type="radio" name="cureway" id="second" class="checker" />second
<input type="radio" name="cureway" id="third" class="checker" />third
<input type="radio" name="cureway" id="forth" class="checker" />forth
<input type="radio" name="cureway" id="five" class="checker" />five

Upvotes: 1

Related Questions