How do I check/uncheck radio buttons using javascript

Question

I have a radio button and a radio button list used for making chart in asp.net... These two buttons represent two different values and I cannot combine them... I want to un-check the radio button if any one of the buttons in the radio button list is clicked and vice versa...

$(document).ready(function() {
    $("[id*=rbtnZone]").click(function() {
        $('#<%=rbtnStore.ClientID %> input:radio').each(function() {
            $(this).prop('checked', false);
        });
    });

    $("[id*=rbtnStore]").change(function() {
        $('#rbtnZone').prop('checked', false);
    });

 });


$(function() {
        $("[id*=rbtnStore]").click(function() {
            var row = $(this).closest('tr');
            var branchId = $(row).find('[id*=hfBranchId]').val();
            var rbtlSales = $("#<%= rbtlSales.ClientID%>");
            var selectedValue = rbtlSales.find("input:checked").val();

            var rbtnStore = $("#<%=rbtnStore.ClientID %>");
            var selectedZone = rbtnStore.find("input:checked").val();

            document.getElementById('<%=rbtlSales.ClientID %>').checked = false;

            var dt = new Date();
            /*Getting Todays Date only*/
            var ddt = new Date(dt.getFullYear(), dt.getMonth(), dt.getDate(), dt.getDay());
            ddt = ddt.toDateString();

            /*Yesterday's Date*/
            var ytd = new Date(new Date() - 24 * 60 * 60 * 1000);
            ytd = ytd.toDateString();

            /*Current Month First Date*/
            var firstdate = new Date(dt.getFullYear(), dt.getMonth(), 1);
            firstdate = firstdate.toDateString();

            /*Previous Month First & Last Dates*/
            var prevfirstday = new Date(dt.getFullYear(), dt.getMonth() - 1, 1);
            prevfirstday = prevfirstday.toDateString();
            var prevlastday = new Date(dt.getFullYear(), dt.getMonth(), 0);
            prevlastday = prevlastday.toDateString();

            if (selectedValue == 'today') {
                var lblHead = 'Todays Sales of ' + selectedZone + ' @ ' + dt;
                document.getElementById('<%=lblStoreName.ClientID %>').innerHTML = lblHead;
            }
            else if (selectedValue == 'yesterday') {
                var lblHead = 'Sales Report of ' + selectedZone + ' on ' + ytd;
                document.getElementById('<%=lblStoreName.ClientID %>').innerHTML = lblHead;
            }
            else if (selectedValue == 'mtd') {
                var lblHead = 'Sales Report of ' + selectedZone + ' from ' + firstdate + ' to ' + ytd;
                document.getElementById('<%=lblStoreName.ClientID %>').innerHTML = lblHead;
            }
            else if (selectedValue == 'prevmonth') {
                var lblHead = 'Sales Report of ' + selectedZone + ' From ' + prevfirstday + ' to ' + prevlastday;
                document.getElementById('<%=lblStoreName.ClientID %>').innerHTML = lblHead;
            }
            else if (selectedValue == 'ytd') {
                var lblHead = 'Sales Report of ' + selectedZone + ' From 1 April 2015 to ' + ddt;
                document.getElementById('<%=lblStoreName.ClientID %>').innerHTML = lblHead;
            }


            $.ajax({
                url: '<%=ResolveUrl("~/Corporate/Sales.aspx/GetStoreData") %>',
                data: "{'rbtlSales':'" + selectedValue + "','rbtnStore':'" + selectedZone + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    var labels = [];
                    var datas = [];
                    $.each(data.d, function(i, item) {
                        var l = item.split('/')[0];
                        var d = item.split('/')[1];
                        var dd = d | 0;
                        labels.push(l);
                        datas.push(dd);
                    });
                    var barChartLocData =
            {
                labels: labels,
                datasets:
                [
                    {
                        fillColor: "lightgreen",
                        highlightFill: "lightgreen",
                        data: datas
                    }
                ]
            };
                    var ctx = document.getElementById("canvas").getContext("2d");
                    new Chart(ctx).HorizontalBar(barChartLocData, {
                        responsive: true,
                        scaleFontColor: "#000",
                        showTooltips: false,
                        onAnimationComplete: function() {
                            var ctx = this.chart.ctx;
                            ctx.font = this.scale.font;
                            ctx.fillStyle = this.scale.textColor
                            ctx.textAlign = "right";
                            ctx.textBaseline = "right";
                            this.datasets.forEach(function(dataset) {
                                dataset.bars.forEach(function(bar) {
                                    ctx.fillText(bar.value, bar.x, bar.y - 5);
                                });
                            });
                        }
                    });
                },
                error: function(response) {
                },
                failure: function(response) {
                }
            });
        });
    });

<asp:RadioButton ID="rbtnZone" runat="server" GroupName="rb" Text="Zone Wise" />
 
<asp:RadioButtonList ID="rbtnStore" runat="server" CellPadding="3" GroupName="rb" RepeatColumns="4" RepeatDirection="Horizontal">
</asp:RadioButtonList>

<!-- begin snippet: js hide: false -->

That is .Net code, but you tagged the question as JavaScript and HTML. Please add the generated HTML code and not the ASP code to your question. — Alvaro Montoro
– Alvaro Montoro, Commented Dec 16, 2015 at 11:57
You can edit the question to edit the tags. But it seems that you are looking for a JavaScript solution, so it would be better to add the generated HTML code instead of adding the .net tag — Alvaro Montoro
– Alvaro Montoro, Commented Dec 16, 2015 at 12:16
I have added the html code... please look into it... Actually i have made half my job done... The list is getting unchecked on clicking on the radio button... But the button is not unchecked on clicking the list... — SaJ
– SaJ, Commented Dec 16, 2015 at 12:30

Suman Pathak · Accepted Answer · 2015-12-16 12:39:13Z

2

You can use the below code :

$(document).ready(function (){
if($('#rbtnZone').is(':checked')){
    $('#rbtnStore').attr('checked',false)
}
else if($('#rbtnStore').is(':checked')){
    $('#rbtnZone').attr('checked',false)
}

$('#rbtnZone').on('change',function (){
    if($(this).is(':checked')){
        $('#rbtnStore').attr('checked',false)
    }
});

$('#rbtnStore').on('change',function (){
    if($(this).is(':checked')){
        $('#rbtnZone').attr('checked',false)
    }
});
});

answered Dec 16, 2015 at 12:39

Suman Pathak

3001 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manuel Roldan · Accepted Answer · 2019-08-06 10:42:30Z

1

Once you have pick the desired Radio through DOM, you just have to state:

Radio.setValue(true/false);

and it will be checked depending on what you want.

edited Aug 6, 2019 at 10:42

answered Feb 20, 2018 at 16:16

Manuel Roldan

5454 silver badges13 bronze badges

Comments

Farhad Enayati · Accepted Answer · 2015-12-16 11:02:35Z

0

you can use this code

document.getElementById("rbtnZone").checked = true;    
document.getElementById("rbtnZone").checked = false;

answered Dec 16, 2015 at 11:02

Farhad Enayati

1653 silver badges18 bronze badges

1 Comment

SaJ Over a year ago

No, i have already tried that... There are two javascript click functions in the same page for chart drawing... The charts works fine, but on clicking on the radio button list, the radio button is also checked...

SaJ · Accepted Answer · 2015-12-17 05:26:00Z

0

I got a solution...

$(document).ready(function() {
    $("[id*=rbtnZone]").click(function() {
        $('#<%=rbtnStore.ClientID %> input:radio').each(function() {
            $(this).prop('checked', false);
        });
    });

    $("[id*=rbtnStore]").change(function() {
    $('#<%=rbtnZone.ClientID %>').prop('checked', false);
    });

});

Thanks for helping by the way...

answered Dec 17, 2015 at 5:26

SaJ

772 silver badges12 bronze badges

Collectives™ on Stack Overflow

How do I check/uncheck radio buttons using javascript

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related