locked
Get radiobuttonfor value RRS feed

  • Question

  • User1694748171 posted

    This is very trival but I can't figure it out. I got radio button have different vale with same name group together, if I click true or false I will get only true value.

                    @Html.RadioButtonFor(model => model.CorrectAnswerOption1, true, new { htmlAttributes = new { @class = "form-control ", @checked = true } })<span class="font-weight-bold"> True</span>
                    @Html.RadioButtonFor(model => model.CorrectAnswerOption1, false, new { htmlAttributes = new { @class = "form-control ", @checked = false } })<span class="font-weight-bold"> False  </span>
            

    when I check the value using javascript it give me only true value even when I choose false radio button

      var x = document.getElementById("CorrectAnswerOption1").value;
         
            alert(x);

    any idea I apprciated . 

    Thursday, October 1, 2020 1:32 AM

Answers

  • User-474980206 posted

    radio buttons are individual elements and have a fixed value. you use the checked property to determine if the raid button is selected. the browser uses the radio button name as group name, so only one radio button in the group is checked.

    so in your case, its just a simple find:

    // get checked value - use call as nodeList is not an array
    var value = Array.prototype.find.call(document.getElementsByName("CorrectAnswerOption1"), function(e) {
       return e.checked;
    }).value;

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 1, 2020 2:41 AM

All replies

  • User-474980206 posted

    radio buttons are individual elements and have a fixed value. you use the checked property to determine if the raid button is selected. the browser uses the radio button name as group name, so only one radio button in the group is checked.

    so in your case, its just a simple find:

    // get checked value - use call as nodeList is not an array
    var value = Array.prototype.find.call(document.getElementsByName("CorrectAnswerOption1"), function(e) {
       return e.checked;
    }).value;

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 1, 2020 2:41 AM
  • User1694748171 posted

    What if I want to used only one radioButtonfor and get true/ false value base on selection, is that possible?

     

           @Html.RadioButtonFor(model => model.CorrectAnswerOption1, true, new { htmlAttributes = new { @class = "form-control ", @checked = true } })<span class="font-weight-bold"> Correct answer</span>

    if I unselected radio button I need to get false. 

    Thursday, October 1, 2020 1:36 PM
  • User-474980206 posted

    if you have only 1 radio button, once selected, it can not be unselected. use a checkbox instead. again it will always have the same value, you look at the checked property to know if it has been checked.

    note: the browser will only post named and checked radio button and checkbox from elements. for the checked elements it sends the name/value pair

    note2: if you use the Html.Checkbox it will render a hidden field with the same name and value="false".

       checked post data:     name=true,name=false (which the binder converts to value "true,false")
       unchecked post date: name=false 

    Thursday, October 1, 2020 6:21 PM
  • User1694748171 posted

    I can't use checkbox because I need to toggle between Radiobutton.

    Thursday, October 1, 2020 7:02 PM