Retrieve the checkbox-success value for each row in the mvc table

I am facing an issue with retrieving the id of each table row when using the bootstrap checkbox-success. However, the normal checkbox allows me to successfully obtain the correct Id for each row. Can anyone assist me in troubleshooting my JavaScript code? Thank you in advance.

*Checkbox-success

<div class="checkbox checkbox-success pull-right" style="display:none !important;">
    <input type="checkbox" name="incidentReportIds" id="incident_report_id" value="@item.incidentReportId" onchange="CheckCountOfSelectedIncident()" />
    <label for="incident_report_id"></label>
</div>

*normal checkbox

<input type="checkbox" name="incidentReportIds" id="incident_report_id" value="@item.incidentReportId" onchange="CheckCountOfSelectedIncident()" style="display:none !important;"/>

*JavaScript function to check the value of each row

var $checkBoxesIncident = $('#tblAllIncidents').find('input[type="checkbox"]');

function CheckCountOfSelectedIncident() {

    var $countChecked = $checkBoxesIncident.filter(':checked').length;

    var check_count = $countChecked;

    alert(check_count);

    //works with normal checkbox
    var checkedIRIds = [];
    $.each($("input[name='incidentReportIds']:checked"), function () {
        checkedIRIds.push($(this).val());

        alert(checkedIRIds);
    });
}

I am also having issues with CSS as the checkboxes in each row are not centered and aligned properly. In the image linked here, you can see that the checkboxes are misaligned. I have tried adjusting it via CSS but haven't succeeded. Here's a snippet of the HTML:

<div class="checkbox checkbox-success" style="display:none !important;">
    <input type="checkbox" name="incidentReportIds" id="incident_report_id" value="@<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7bea3b2baf9beb9b4beb3b2b9a385b2a7b8a5a39eb3fc97bea3b2baf9a4a3b6a3a2a499b6bab2">[email protected]</a>" onchange="CheckCountOfSelectedIncident()" />
    <label for="incident_report_id"></label>
</div>

Full CSS for the checkboxes:

.checkbox {
    padding-left: 20px;
}

.checkbox label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 5px;
}
...
javascriptcssasp.net-mvcbootstrap-4

Answer №1

If you're looking to obtain the IDs of all selected checkboxes, take a look at this example. Hopefully, it will be useful for you.

This will provide you with all the IDs in a comma-separated format, allowing you to perform any necessary manipulations with them.

  <input type="checkbox" name="vehicle" value="3"> third checkbox<br>
  <input type="checkbox" name="vehicle" value="4"> fourth checkbox<br>
  <input type="checkbox" name="vehicle" value="5"> fifth checkbox<br>
  <input type="checkbox" name="vehicle" value="6"> sixth checkbox<br>

Additionally, your script should resemble the following:

 <script type="text/javascript">
$("#button").click(function(){
 var v  = $.map($('input[name="vehicle"]:checked'), function(c){return c.value; });
 alert (v);
});

Check out this JS Fiddle Example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the Differences Between Backbone.js' ID, idAttribute, and CID

After spending a few weeks learning Backbone.js, I've become proficient in using views with models, routers, and collections. However, there are still some significant gaps in my understanding: Can you explain the relationship between id, cid, an ...

javascriptjqueryajaxbackbone.jsunderscore.js

Troubleshooting issue with displaying favicons in express.js

Currently, I am working on a simple express.js example and trying to get favicons to display properly. Everything functions correctly when testing locally, but once uploaded to my production server, only the default favicon appears. I have attempted cleari ...

javascriptnode.jsexpressfaviconiisnode

What is a more efficient way to avoid duplicating code in javascript?

Is there a way to avoid repeating the same code for different feeds? I have 8 feeds that I would like to use and currently, I am just incrementing variable names and feed URLs. <script type="text/javascript> function showFeed(data, content ...

javascriptjsonrss

What could be causing my ASP.Net MVC script bundles to load on every page view?

I'm a bit puzzled. The _layout.cshtml page I have below contains several bundles of .css and .js files. Upon the initial site load, each file in the bundles is processed, which makes sense. However, every time a new view is loaded, each line of code f ...

javascripthtmlasp.net-mvcscriptbundle

Creating a Mondrian-inspired design using a combination of red, blue, and yellow within an HTML table

Is there anyone who can assist me in recreating this painting using HTML <table> tag and CSS within a browser? The image to replicate: https://i.stack.imgur.com/84y4I.jpg I attempted to complete this task, but my instructor is dissatisfied with th ...

htmlcss

The selected option in Bootstrap is displayed twice in the Bootstrap modal

I am facing an issue with Bootstrap Select-box showing multiple times in a bootstrap modal wizard. I have tried various solutions from Stack Overflow but none of them seem to work. A screenshot of the problem can be seen below: https://i.sstatic.net/glp3E ...

javascriptjqueryhtmlcsstwitter-bootstrap

The Bootstrap Carousel is failing to respond as expected

Having some trouble incorporating a carousel on my landing page. I can see the first image, but the carousel isn't sliding to the next one. I copied the template from bootstrap-carousel, but even the data-bs-interval attribute isn't responding. M ...

htmlcsscarouselbootstrap-5

"Extracting information from the axios header and passing it to a Vue component: A step-by-step

I am working with an axios apiClient and trying to retrieve the email stored in localStorage to use in the header of my component. I attempted to access the email by using response.headers['email'] and storing it in a variable called email, but ...

javascriptvue.jsvuejs2axiosvue-component

Rotating a cone in three.js using two points and a specified radius

Using the coordinates and radius provided in an example XML file, I am trying to create a cone. Is there a way to rotate the cone if I have the top vertex's coordinates and the center of the base? Here is an image for reference: Image ...

javascriptthree.jsrotation

Enhance the array by updating objects within it using the spread operator

I'm looking to modify the name of the second object in a javascript/typescript array. Here's my array: let array = [{id:1,name:'One'}, {id:2, name:'Two'}, {id:3, name: 'Three'}] Is there a way to update the name of ...

javascripttypescriptredux

Are you looking for methods to alter the elements of a webpage prior to viewing it?

I have created a page with the intention of using it as a tool, but I am facing some challenges due to my limited experience in this field. As a newcomer, I am struggling to achieve certain goals: - My objective is to modify the values of an element on a p ...

javascripthtmlcssdombootstrap-4

Is there a way to keep the input field data in my form in next js persist even after the page refreshes?

I am currently developing a form in Next.js and I need the data to persist even after the page is refreshed or reloaded. Unfortunately, local storage does not work with Next.js, so I am exploring other alternatives. Every time I try to use local storage, ...

javascriptreactjsformsnext.js

Traverse XML documents using jQuery

I'm facing a challenge with this particular issue. I have multiple XML files labeled by an ID (each XML has its own unique value). My goal is to iterate through these files and display their contents in HTML format. However, the loop starts before t ...

javascriptjqueryxmljson

What is the best way to pass a custom HTTP header to a Node.js server?

One of my current challenges involves utilizing jQuery to include a custom header in each AJAX request. $.ajaxSetup({ beforeSend: function (xhr) { xhr.setRequestHeader ("Authorization", "Basic " + btoa(user + ":" + sessionID)); }, }); My ...

javascriptnode.jsajaxhttpheader

Tips on extracting JSON information in JavaScript when the key name is unspecified

I have a challenge in parsing JSON data where the property name is unknown. Below is a snippet of my code, and I need your help in figuring out how to retrieve all data with an unknown property. datas.data.videoGroup.past, then utilize a loop $.each(data ...

javascripthtmljson

HTML - Is there a way to hide the label showing the number of files selected when using input type=file?

I am seeking a way to either eliminate the label that indicates the number of selected files, or be able to control it so that when I upload a file, the label increases and decreases when I delete an uploaded file. How can I achieve this? Below is my HTML ...

jqueryhtmlasp.net-mvcfile-upload

Not all mobile browsers support centering, but regular browsers work flawlessly

For some reason, I am experiencing an issue with centering divs on mobile browsers. It works perfectly fine on normal PC browsers - no issues at all =D. However, the main content on mobile devices remains stuck to the left. I have tried multiple solutions ...

csshtmlmobilebrowser

Using setInterval in pugjs

Trying to implement a time creator using mixins in PugJS. I am getting special names from other pages as "type" but encountering an unexpected text error on the second to last line. I have been unable to resolve it, could you please assist? mixin createT ...

javascriptnode.jspug

Using VueLoaderPlugin() results in an 'undefined error for 'findIndex' function

Currently, I am in the process of integrating a Vue CLI app into another web project that we are actively developing. The Vue app functions without any issues when utilizing the development server bundled with Vue CLI. Due to the presence of .vue files wi ...

javascriptvue.jswebpack

Ensuring the text is positioned centrally and at the bottom of a table cell

Is there a way to center and align text at the bottom of a cell in table? This is my desired layout: ...

htmlcsscss-tables