Pass Dynamically Generated Checked CheckBox's Value to Method in ASP.NET MVC

Question

I have a form in View that on button click sends Model full of data to my Controller's ActionResult method.

In View I am generating checkboxes based on ViewModel's certain list content. Basically the number of checkboxes depends on number of items in the list while the page loads, so it may vary from session to session.

It the moment checkboxes are getting values corresponding to the items from the list.

I want to include checkboxes in the form. I don't know however how to pass their values dynamically to the Method along with Form's Model for other controls in the Form as their Id's, Names and number of them may vary.

ANyone has some idea how I can identify values of checkboxes that are checked?

Answer 1

In Razor/CSHTML:

<input type="checkbox" id="GB" class="CHK" onchange="selectCountry()" /> GB
<input type="checkbox" id="IE" class="CHK" onchange="selectCountry()" /> IE
<input type="checkbox" id="FI" class="CHK" onchange="selectCountry()" /> FI
<input type="checkbox" id="SE" class="CHK" onchange="selectCountry()" /> SE
<input type="checkbox" id="DK" class="CHK" onchange="selectCountry()" /> DK

In JS (to identify the variable):

var CountryChosen=''; //create empty variable to be filled
function selectCountry() {

        if (document.getElementById("GB").checked == true) {
            CountryChosen = "GB";
        }
        if (document.getElementById("IE").checked == true) {
            CountryChosen = "Ireland";
        }
        if (document.getElementById("FI").checked == true) {
            CountryChosen = "Finland";
        }
        if (document.getElementById("SE").checked == true) {
           CountryChosen = "Sweden";
        }
        if (document.getElementById("DK").checked == true) {
            CountryChosen = "Denmark";


    }
}

You could also do an empty array for multiple selections:

CountriesChosen = []; 

and instead of CountryChosen = X, do .push() to add to the full array and call the variables as part of the array...food for thought anyhow. You can then use the JS variables to pass to the controller and action result but it depends what the action result is doing (eg JSON call could be through AJAX/JQUERY call and use the CountryChosen as a variable).

Answer 2

You can do it easily by using jQuery selectors as below. Keep the name of all checkboxes as the same and use the selector as below.

 function getChecked() { var checked_items = ''; $("input[name='item']:checked").each(function () { // get the checked items checked_items = checked_items + "&item=" + $(this).val(); }); alert('JQUERY : Checked items are : ' +checked_items) checked_items = '' var items = document.getElementsByName("item") for (i=0;i<items.length;i++){ if (items[i].checked) checked_items = checked_items + "&item=" + items[i].value; } alert('JAVASCRIPT : Checked items are : ' +checked_items) } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <input type="checkbox" name="item" value="1" />1 <input type="checkbox" name="item" value="2" />2 <input type="checkbox" name="item" value="3" />3 <input type="checkbox" name="item" value="4" />4 <input type="button" value="Submit" onclick="getChecked()">