CODEWITHSUNDEEP
javascriptjqueryhtmlradio-button
Fitre
Fitre

Reputation: 31

can not get value from radio button using jquery

I try to get value from radio button, here's my code:

var isactive = result.IsActive;
            $("input[name='RadioActive']").each(function () {
                if ($(this).val() == isactive) {
                    $(this).attr("checked", "checked");
                }
            });

and the html :

<section class="col col-lg-2">
    <label class="label">Active</label>
         <div class="inline-group">
            <label class="radio">
                 <input type="radio" name="RadioActive" class="RadioActive" value="T" />
                 <i></i>
                 Yes
            </label>
            <label class="radio">
                 <input type="radio" name="RadioActive" class="RadioActive" value="F" />
                 <i></i>
                  No
            </label>
         </div>
</section>

Doesn't work. Do you have any Idea ? What am I Missing ?

Upvotes: 0

Views: 849

Answers (5)

Deepa
Deepa

Reputation: 184

Here is your JavaScript code:

 $(document).ready(function () {
        $('#myForm').on('click', function () {
            var value = $("[name=RadioActive]:checked").val();
            alert("Selected Radio Value is :  " + value);
        })
    });

HTML code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="script.js"></script>
  </head>

  <body>
    <form id="myForm">
      <section class="col col-lg-2">
          <label class="label">Active</label>
               <div class="inline-group">
                  <label class="radio">
                       <input type="radio" name="RadioActive" class="RadioActive" value="T" />
                       <i></i>
                       Yes
                  </label>
                  <label class="radio">
                       <input type="radio" name="RadioActive" class="RadioActive" value="F" />
                       <i></i>
                        No
                  </label>
               </div>
      </section>
    </form>
  </body>
</html>

and here is a working plunker for the code:
https://plnkr.co/edit/D9UaU43OxHGUg80xxsiS?p=preview

Upvotes: 0

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

var isActive='F';

$("input[name='RadioActive']").each(function (index,value) {
               if( $(value).val()==isActive)
                $(value).attr('checked','checked');
            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="col col-lg-2">
    <label class="label">Active</label>
         <div class="inline-group">
            <label class="radio">
                 <input type="radio" name="RadioActive" class="RadioActive" value="T" />
                 <i></i>
                 Yes
            </label>
            <label class="radio">
                 <input type="radio"  name="RadioActive" class="RadioActive" value="F" />
                 <i></i>
                  No
            </label>
         </div>
</section>

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

The problem is that result.IsActive isn't resolving. Simply setting isactive to either T or F will check the radio button for you:

var isactive = "T";
$("input[name='RadioActive']").each(function() {
  if ($(this).val() == isactive) {
    $(this).attr("checked", "checked");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="col col-lg-2">
  <label class="label">Active</label>
  <div class="inline-group">
    <label class="radio">
      <input type="radio" name="RadioActive" class="RadioActive" value="T" />
      Yes
    </label>
    <label class="radio">
      <input type="radio" name="RadioActive" class="RadioActive" value="F" />
      No
    </label>
  </div>
</section>

Note that setting it to true or false will not trigger the checked attribute; it needs to equal the value of the radio button exactly (which are T and F respectively).

Ensure that your result.IsActive returns either T or F, and it will work correctly for you.

Hope this helps! :)

Upvotes: 0

Sahil Shaikh
Sahil Shaikh

Reputation: 171

You can use something like below

$("input[name='RadioActive']:checked").val()

Upvotes: 0

brk
brk

Reputation: 50291

To select a radio button using jquery use prop.

In the below snippet expecting the value of result.IsActive to be F & assigning it to isactive 

var isactive = "F";
$("input[name='RadioActive']").each(function() {
  if ($(this).val() == isactive) {
    $(this).prop("checked", "checked");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="col col-lg-2">
  <label class="label">Active</label>
  <div class="inline-group">
    <label class="radio">
                 <input type="radio" name="RadioActive" class="RadioActive" value="T" />
                 <i></i>
                 Yes
            </label>
    <label class="radio">
                 <input type="radio" name="RadioActive" class="RadioActive" value="F" />
                 <i></i>
                  No
            </label>
  </div>
</section>

Upvotes: 1

Related Questions