How to count all check checkbox from selected row using jquery-CodePudding

I would have a page where table with selected rows are generated with single checkbox for each cell using JQuery. Table columns are fixed as for 12 months.

As the rows are generated based on dropdown. Then the no of rows generated would get values in another dropdown too.

I want to get the counts of all checked checkbox from the row number as get selected from another dropdown on button click using JQuery. Code is below

HTML:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CheckBox.aspx.cs" Inherits="PracticeWebApp.CheckBox" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="CSS/assets/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="CSS/assets/dist/css/customstyl.css" rel="stylesheet" />
    <script src="CSS/assets/dist/js/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>

    <script src="JS/CheckBox.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <%--<input type="button" id="btnGenerate" value="Generate Table" />&nbsp;--%>
            <div >
                <input type="hidden" id="msghf" />
                Generate Table of Rows &nbsp;<select id="DropDownListcols" >
                    <option value="0">SELECT</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                </select>
                &nbsp;
            <input type="submit" id="submitbutton" value="Submit"  style="display:none;" />
                <hr />
            </div>
            <div >
                &nbsp; Get Selected Checkbox of Row No &nbsp;<select id="ddlselectrow" >
                     
                </select>&nbsp;
                <input type="submit" id="submitbuttongetchecked" value="View"  />
            </div>
            <hr />
            <div >
                <div >
                    <div >
                        <div id="xmldisplay">
                        </div>
                        <div id="dvTable">
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </form>
</body>
</html>

CheckBox.js:

$(function () {
    $("#DropDownListcols").change(function () {
        //debugger;
        //Get the count of columns.
        var options = null;
        var totalrows = $(this).val();
        options  = '<option value="0">SELECT</option>';
        for (var a = 1; a <= totalrows; a  ) {
            options  = '<option value="'   a   '">'   a   '</option>';
        }
        $('#ddlselectrow').append(options);

        var columnCount = 12;
        //Create a HTML Table element.
        var table = '<table  id="Mastertable">';
        table  = '<thead >';
        for (var mon = 1; mon <= 12; mon  ) {
            table  = '<th>'   toMonthName(mon)   '</th>';
        }
        
        //Create table header according to number of columns
         
        table  = '</thead>';
        table  = '<tbody>';
        for (var j = 0; j < totalrows; j  ) {
            table  = '<tr id="rowid_'   (j   1)   '">';
            for (var z = 0; z < columnCount; z  ) {
                table  = GetRowswithCheckBoxes(toMonthName(z 1), (z   1).toString(), (j   1).toString());
            }
            table  = '</tr>';
        }
        table  = '</tbody>';
        table  = '</table>';

        $("#dvTable").html("");
        $("#dvTable").html(table);

        //BindCheckedCheckbox();

    });

    //$("#submitbutton").click(function (e) {
    //    e.preventDefault();
    //    //alert('Hello');
    //    SaveXMLDatatoDatabase();
    //});
});

function toMonthName(monthNumber) {
    const date = new Date();
    date.setMonth(monthNumber - 1);

    return date.toLocaleString('en-US', {
        month: 'short',
    });
}

function GetRowswithCheckBoxes(namevar, cols, rows) {
    var a = '<td><input type="checkbox" value="chk'   namevar   '" id="chk'   namevar   '_Col'   cols   '_Row'   rows   '"/></td>'
    return a;
}

$(function () {
    $("#submitbuttongetchecked").click(function (e) {
        e.preventDefault();
        debugger;
        var checkboxes;
        var rowcheckfor = $('#ddlselectrow').val();
        var id = $("#Mastertable #rowid_"   rowcheckfor);
        $(id).each(function () {
            checkboxes = $(":checkbox:checked").length;
            
            //return false;
        });
        alert("Row No : "   rowcheckfor   ", Checked : "   checkboxes);
    })
});

As you see the function mentioned in above code:

$(function () {
        $("#submitbuttongetchecked").click(function (e) {
            e.preventDefault();
            debugger;
            var checkboxes;
            var rowcheckfor = $('#ddlselectrow').val();
            var id = $("#Mastertable #rowid_"   rowcheckfor);
            $(id).each(function () {
                checkboxes = $(":checkbox:checked").length;
                
                //return false;
            });
            alert("Row No : "   rowcheckfor   ", Checked : "   checkboxes);
        })
    });

It is defined to check all the checkboxes in the selected row. But it iterating through all the rows. How should I get the count of checked checkboxes in row selected from the Dropdown?

CodePudding user response：

Your code works fine....

but you missed this

checkboxes =  $(this).find(':checkbox:checked').length;

change this your code ., it works

$(function () {
    $("#submitbuttongetchecked").click(function (e) {
        e.preventDefault();
       
        var checkboxes;
        var rowcheckfor = $('#ddlselectrow').val();
        var id = $("#Mastertable #rowid_"   rowcheckfor);
       // alert(rowcheckfor);
        $(id).each(function () {
        // debugger;
            checkboxes =  $(this).find(':checkbox:checked').length;
            
            //return false;
        });
        alert("Row No : "   rowcheckfor   ", Checked : "   checkboxes);
    })
});

This will all the checkboxes in the form

 checkboxes = $(":checkbox:checked").length;