How to retrieve true/false from a checkbox input?

Question

I have a table, and each row of the table has two checkboxes. I am going through each row of the table and trying to send a boolean back to the controller (true if checked, false if not), but the value being passed back is always false. For reference, this is how I have been setting up the table:

@foreach (var item in Model.lockers)
{
    <tr>
        <td>
            @Html.CheckBoxFor(modelItem => item.IsActive, new { htmlAttributes = new { @class = "form-control IsEnabled" } })
        </td>
        <td>
            @Html.CheckBoxFor(modelItem => item.IsADA, new { htmlAttributes = new { @class = "form-control IsADA" } })
        </td>
    </tr>
}

And this is my code to retrieve the information from this checkbox:

var list = [];
$('#tblMaster tbody tr').each(function (index, ele) {
    var LockerDoorMaster = {
        IsActive: $('.IsEnabled', this).is(":checked"),
        IsADA: $('.IsADA', this).is(":checked")  
    }
    list.push(LockerDoorMaster);
});

How can I modify my code so that the value 'true' will be passed back if the checkbox is checked? Thank you!

You could try and use !!$('.IsEnabled', this).is(":checked"), This basically tells JavaScript if the value is '0' or 'null' than it's false else it's true. — Ezrab_
– Ezrab_, Commented Jul 29, 2020 at 20:19
If you post the html generated more people would be able to help, just saying. — Máttheus Spoo
– Máttheus Spoo, Commented Jul 29, 2020 at 20:22
When are you running this code? Is it happening at a point after the user has had a chance to interact with the page? — Scott Marcus
– Scott Marcus, Commented Jul 29, 2020 at 20:27
@ScottMarcus yes, the snippet of javascript i included was to populate data to be sent back to the controller in a POST request. — christine
– christine, Commented Jul 29, 2020 at 20:32
That really doesn't answer my question. When is the POST request being made? What's the event that you are calling this code in response to? — Scott Marcus
– Scott Marcus, Commented Jul 29, 2020 at 20:37

Ethan Eyob · Accepted Answer · 2020-07-29 20:40:00Z

1

<html>
<body>
<form name="y">
<input type="checkbox" name="inputOne">
<input type="checkbox" name="inputTwo">
</form>
<p id="demo"></p>
<script>
if(document.forms["form"]["inputOne"].selected ==   "true"){   document.getElementById("demo").innerHTML = "You Selected The First Button";}
if(document.forms["form"]["inputTwo"].selected ==   "true"){ document.getElementById("demo").innerHTML = "You Selected The Second Button";}
</script>
</body>
</html>

answered Jul 29, 2020 at 20:40

Ethan Eyob

295 bronze badges

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

Comments

DCR · Accepted Answer · 2020-07-29 20:34:19Z

0

sometimes plain vanilla js is the best way to go.

var cb = document.getElementById('cb').checked;
console.log(cb);

var cb2 = document.getElementById('cb2').checked;
console.log(cb2);

<input id='cb' type='checkbox'>

<input id='cb2' type='checkbox' checked>

answered Jul 29, 2020 at 20:34

DCR

15.8k13 gold badges61 silver badges131 bronze badges

Comments

Midnight Blur · Accepted Answer · 2020-07-29 20:35:38Z

If i understood you correctly, you need to add an event that will trigger on checkbox change, because otherwise you will always have the checkbox initial value when you submit the data in your list.

var list = [];

function setList() {
    list = [];
    $('#tblMaster tbody tr').each(function (index, ele) {
        var LockerDoorMaster = {
            IsActive: $('.IsEnabled', this).prop('checked'),
            IsADA: $('.IsADA', this).prop('checked')
        };
        list.push(LockerDoorMaster);
    });
}

setList();

$('.IsEnabled').on('change', function () {
    setList();
});

$('.IsADA').on('change', function () {
    setList();
});

Basically this code updates your list every time the checkbox value changes. Although this is not the best approach, but it answers your question

Collectives™ on Stack Overflow

How to retrieve true/false from a checkbox input?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related