CODEWITHSUNDEEP
jquerytwitter-bootstrapradio-button
Adam Dulson
Adam Dulson

Reputation: 283

Cannot get value of checkbox

I spent the day on this issue that you will probably find very basic... I've read a lot of things on the web but could not get my stuff to work .

I have a simple 2 radio fields in a form and I would like to retrieve the value of the checked radio button. Here is my form : 

<div class="col-xs-6">
    <div class="radio radio-inline">
              <input type="radio" id="id1" data-toggle="radio" name="deliveryMethod" value="courrier" checked="">
              <label for="id1">Courrier</label>
    </div>
    <div class="radio radio-inline">
              <input type="radio" id="id2" data-toggle="radio" name="deliveryMethod" value="local">
              <label for="id2">Local</label>
    </div>
</div>

My js is : 

$('input[type="radio"]').change(function() {
            console.log(this.value)
});

I cannot get the right value. I get the opposite value (local when Courrier is selected, and vice versa). I also get both values when I click the labels...

I'm really lost.

Thanks ahead for your help.

Upvotes: 2

Views: 1195

Answers (4)

Serge Fonville
Serge Fonville

Reputation: 326

According to w3schools, this is normal behaviour https://www.w3schools.com/jsref/event_onchange.asp

Definition and Usage

The onchange event occurs when the value of an element has been changed. For radiobuttons and checkboxes, the onchange event occurs when the checked state has been changed.

Tip: This event is similar to the oninput event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed. The other difference is that the onchange event also works on elements.

Therefore, whenever you deselect the radio-button (by selecting the other one), you get its value. So you can use either oninput or onchange, depending on what point you want the action to occur.

Upvotes: 0

lat94
lat94

Reputation: 521

Like others said, it is working just fine.

Here is a fully working example you should try:

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>RadioButton Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <div class="col-xs-6">
            <div class="radio radio-inline">
               <input type="radio" id="id1" data-toggle="radio" name="deliveryMethod" value="courrier" checked="">
               <label for="id1">Courrier</label>
            </div>
            <div class="radio radio-inline">
               <input type="radio" id="id2" data-toggle="radio" name="deliveryMethod" value="local">
               <label for="id2">Local</label>
            </div>
         </div>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script type="text/javascript">
         $('input[type="radio"]').change(function() {
                 console.log(this.value)
         });
      </script>
   </body>
</html>

EXTRA

If you want to GET the first value (when the page is rendered first time) then you should try using some jQuery function, like "on ready" or "on load".

$(document).ready(function(){
    // Perform something here...

});


//or

$(document).load(function(){
   // Perform something here...
});

Upvotes: 1

designerbase
designerbase

Reputation: 61

yes your code is working.. i also tried with your code.

try this https://jsfiddle.net/eaje2ywt/4/

$('input[type="radio"]').change(function() {
        console.log($(this).val());
});

Upvotes: 1

Lee A.
Lee A.

Reputation: 33

I just pasted your code into a jsfiddle and it works correctly.

https://jsfiddle.net/c42vd3m9/1/

My only thought is that it's possible that you incorrectly copied 

$('input[type="radio"]').change(function() {
        console.log(this.value)
});

into your document.

Upvotes: 1

Related Questions