How to get value from a RadioButton field in JS?

Question

How to get value from a RadioButton field in JS?

Navigation

#1 by (2 votes)

0

I can not get value of my field RadioButton

@Html.Label("Ativo")
@Html.RadioButtonFor(v => v.Ativo,"S", new { name="ativo"})
@Html.Label("Inativo")
@Html.RadioButtonFor(v => v.Ativo,"N", new { name="ativo"})

<script>
function ObterValues() {
 var radioButton =  $('input:radio[name^=ativo]:checked').val();  
 console.log(radioButton);
}
 </script>

javascript jquery asp.net-mvc

asked by anonymous 20.02.2015 / 17:12

1 answer

The ref attribute of an xml schema document element Create a condition within a Linq

score 2 · Answer 1

The problem here is in MVC syntax. To override the name attribute of Html, you must use the @Name (with N masculo) property.

DotNetFiddle

Model

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
    public class SampleViewModel
    {
        [Display(Name="Ativo")]
        public bool Ativo { get; set; }
    }
}

Controller

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View(new SampleViewModel());
        }
    }
}

View

@model HelloWorldMvcApp.SampleViewModel
@{
    Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head> 
    <body>
        @using (Html.BeginForm())
        {
            <div>
                @Html.Label("Ativo")
                @Html.RadioButtonFor(v => v.Ativo,"S", new { @Name="ativo"})
                @Html.Label("Inativo")
                @Html.RadioButtonFor(v => v.Ativo,"N", new { @Name="ativo"})
            </div>
        }
        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){           
                var ativo = $("input:radio[name='ativo']");
                function onAtivoClick() {
                    var value =  ativo.filter(":checked").val();
                    console.log(value);
                }                   
                ativo.click(onAtivoClick);
            });
        </script>
    </body>
</html>