when change value of checkbox from yes to no or reverse action ApprovalIndex not detect value changed?

Question

I work on asp.net MVC app . I face issue checkbox value not detected changing value from true to false or reverse .

meaning if I change checkbox Value from Yes to No OR No to Yes nothing detected according to speakstuff property model .

Exactly I need when checkbox check for yes then true and if check box for No will be false .

html script represent yes or No check box

<table style="border: 1px solid black;width:100%;margin-bottom:5px;">

            <tr>
                <td style="width: 50%; font-weight: bold; padding-top: 10px;">
                    @Html.Label("Did You Meet/Speak to Staff", htmlAttributes: new { @class = "control-label col-md-5" })
                    <div class="col-md-7">
                        <input type="checkbox" id="SpeakStuff" name="SpeakStuff" value="true" class="speak-stuff-checkbox" @(Model.SpeakStuff ? "checked" : "") />
                        Yes
                        &nbsp;&nbsp;
                        <input type="checkbox" id="SpeakStuff" name="SpeakStuff" value="false" class="speak-stuff-checkbox" @(!Model.SpeakStuff ? "checked" : "") />
                        No
                    </div>
                </td>
</table>

And below is jQuery to allow only selection with yes or no

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

    $(document).ready(function () {
        $('.speak-stuff-checkbox').on('change', function () {
            $('.speak-stuff-checkbox').not(this).prop('checked', false);
        });
});

I access value from form by java script

<script type="text/javascript">
        function submit() {
            var ResignationRequester = new Object();
            ResignationRequester.SpeakStuff = document.getElementById("SpeakStuff").value;
            
            

</script>

model that represent property SpeakStuff

 public class ResignationRequester
    {
        [Display(Name = "Employee No : ")]
        [Required]
        public int EmpID { get; set; }
        [Display(Name = "Request No")]
        public int RequestNo { get; set; }
        public bool SpeakStuff { get; set; }

    }

and When click approve button and check speakstuff property it still not changed

using (Html.BeginForm("ApprovalIndex", "Resignation", new { id = Model.RequestNo }, FormMethod.Post, htmlAttributes: new { @style = "display:inline;" }))
        {
            

            <a onclick="submit();" class="btn btn-primary" style="min-width: 100px;margin-top:5px;
            margin-left: 1300px;"><i class="glyphicon glyphicon-ok"></i> Approve </a>
            
        }

when debug model ResignationRequester speakstuff property it still true on all cases and if I change check box selection it still without change .

[HttpPost]
      
        public async Task<ActionResult> ApprovalIndex(ResignationRequester REQ)
        {
        }

Answer 1

Use the Html.EditorFor instead of input type="checkbox".

The input type="checkbox" submits its value to the server only when it is checked. Nothing is submitted if it is not checked.

The Html.EditorFor renders not only input type="checkbox" but also input type="hidden" value="false" with the same name.

See "Note" of the following MDN document:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox

Answer 2

Hi @Ahmed Abd El Aziz

Based on your code, I've modified it to follow the principle of @HTML.Checkbox.

I didn't change the same part above.

I changed yours **<a>**to **<input>**submit data. Also set up a @HTML.Textbox to get the data. But this @HTML.Textbox is just a vehicle, I hid it. Its initial value is the initial value of the checkbox "SpeakStuff", and when the value of the checkbox changes, it also changes.

@using (Html.BeginForm("ApprovalIndex", "Resignation", new { id = Model.RequestNo }, FormMethod.Post, htmlAttributes: new { @style = "display:inline;" }))
        {
@Html.TextBox("result", "false", new { style = "display:none;" })
<input type="submit" class="btn btn-primary" style="min-width: 100px;margin-top:5px;
            margin-left: 1300px;">
        }

<script>

    $(document).ready(function () {
        $('.speak-stuff-checkbox').on('change', function (e) {
            $('.speak-stuff-checkbox').not(this).prop('checked', true);
            $('#result').val($('.speak-stuff-checkbox').val());
        });
    });
</script>

Next we get the value in the background and assign it to ResignationRequester.SpeakStuff.

 public ActionResult ApprovalIndex()
 {
    ResignationRequester resignationRequester = new ResignationRequester();
    string a = Request["result"];
    resignationRequester.SpeakStuff = Convert.ToBoolean(a);
    return View(resignationRequester);
 }

For demonstration, I output it directly to the page:

Best regards,
Qi You

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

the value of a checkbox is always the value attribute whether its checked or not. also element id's are supported to be unique, but getElementById() just return the first match. your code:

            var ResignationRequester = new Object();
            ResignationRequester.SpeakStuff = document.getElementById("SpeakStuff").value;            

the value of ResignationRequester.SpeakStuff is always the string "true". you probably wanted:

            var ResignationRequester = {};
            ResignationRequester.SpeakStuff = document.getElementById("SpeakStuff").checked;            

its not clear why you used two checkboxes, instead of a radio button for mutually exclusive choices.

        <div class="col-md-7">
            <input type="radio" id="SpeakStuffYes" name="SpeakStuff" value="true" class="speak-stuff-radio" @(Model.SpeakStuff ? "checked" : "") />
                        Yes
                        &nbsp;&nbsp;
            <input type="radio" id="SpeakStuffNo" name="SpeakStuff" value="false" class="speak-stuff-radio" @(!Model.SpeakStuff ? "checked" : "") />
                        No
        </div>

        var ResignationRequester = {};
        ResignationRequester.SpeakStuff = document.querySelector("[name=SpeakStuff]:checked").value == "true";