Get true or false for radio button in Javascript

Question

I am getting data from my view, and using JavaScript to save.

HTML:

 <div>
     @Html.LabelFor(model => parts.ReturnRequired)
     @Html.RadioButtonFor(model => parts.ReturnRequired, true) Yes
     @Html.RadioButtonFor(model => parts.ReturnRequired, false) No
 </div>

This is my JavaScript:

$(document).ready(function () {
    $('#btPartHeaderSave').click(function () {
        var status = $('#parts_Status').val();
        var partsRequestOrderNum = $('#parts_PartsRequestOrderNum').val();
        var custShipping = $('#parts.CustShipping').val();
        var shipAddress1 = $('#parts_ShipAddress1').val();
        var shipAddress2 = $('#parts_ShipAddress2').val();
        var shipCounty = $('#parts_ShipCounty').val();
        var postCode = $('#parts_ShipPostCode').val();
        var deliveryType = $('#parts_DeliveryType').val();
        var notes = $('#parts_Notes').val();
        //var returnRequired = $('#ReturnRequired').val() == true;

        $.ajax({
            url: $(this).attr('data-url'),
            //url: "/Parts/PartHeaderSave",
            type: "POST",
            data: JSON.stringify({
                status: status, 
                partsRequestOrderNum: partsRequestOrderNum, 
                custShipping: custShipping, 
                shipAddress1: shipAddress1, 
                shipAddress2: shipAddress2, 
                shipCounty: shipCounty, 
                postCode: postCode, 
                deliveryType: deliveryType, 
                notes: notes, 
                returnRequired: returnRequired
            }),
            dataType: "json",
            traditional: true,
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                alert("You have sucessfully saved the header");
                alert(returnRequired);
                //   $('#alertSavePartOrderHeader1').addClass('in');
            },
            error: function () {
                alert("An error has occured!!!");
            }
        });
    });
});

I am trying to get the value of ReturnRequired.

//var returnRequired = $('#ReturnRequired').val();

How do I set this up, to show in the database as 1 or 0? I am assuming using, .val() won't work.

For some reason, if I click yes it returns 0, and if I click no, it still returns 0, even though in my html I got my true / false.

score 4 · Accepted Answer · edited Mar 20 '15 at 12:46

4

The :checked pseudo-class selector is applicable for checkboxes and radio buttons. This will convert the boolean value of the checked property to 0 or 1:

var returnRequired = $('#ReturnRequired').is(':checked') ? 1 : 0;

You can also use the double tilde solution, but I do not think that the potential small performance gain is worth the lack of readability.

Another solution is using Number constructor, or using an implicite cast with the unary +. These are equivalent.

var returnRequired = new Number($('#ReturnRequired').is(':checked'));
var returnRequired = +$('#ReturnRequired').is(':checked');

You can depend on this solution, because the ECMAScript standard specifies, that true is converted to 1 and false to 0.

edited Mar 20 '15 at 12:46

Uyghur Lives Matter

18,820
42
108
144

answered Mar 20 '15 at 10:23

meskobalazs

15,741
2
40
63

Don't forget the unary `+` operator; [`+true` will give `1`](http://stackoverflow.com/questions/14787761/convert-true-1-and-false-0-in-javascript), and (at least in my opinion) it is a pretty obvious "cast to Number" – Paul S. Mar 20 '15 at 10:43
how come when i refresh the the screen it always shows False as default.... even though it is true? – ma32112345 Mar 20 '15 at 10:49
Try putting `true` and `false` into quotation marks in the template. I am not familiar with ASP.Net. – meskobalazs Mar 20 '15 at 11:10

score 1 · Answer 2 · answered Mar 20 '15 at 10:25

1

var getter = $('#ReturnRequired').prop('checked');
var setter = $('#ReturnRequired').prop('checked',false);

answered Mar 20 '15 at 10:25

Chris

200
2
4
12

score 0 · Answer 3 · answered Mar 20 '15 at 10:21

0

Try this:

var returnRequired = $('#ReturnRequired').is(':checked');

answered Mar 20 '15 at 10:21

Viswanath Donthi

1,791
1
11
12

score 0 · Answer 4 · answered Mar 20 '15 at 10:23

0

First, check if the radio-button is checked or not. From there on, turning the boolean value into a number is very straight forward.

~~(true) //1
~~(false) //0

answered Mar 20 '15 at 10:23

Etheryte

24,589
11
71
116

Get true or false for radio button in Javascript

4 Answers4