получить значение checkbox-success на строку в таблице mvc

Question

У меня есть флажок в каждой строке моей таблицы, и моя проблема в том, что я не получаю идентификатор каждой таблицы, если я использовал загрузчик checkbox-success.Но если я использую обычный флажок, я успешно получаю правильный идентификатор каждой строки.В чем проблема в моем JavaScript?Кто-нибудь может мне помочь?Заранее спасибо.

* 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>

* нормальный флажок

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

* Javascript для проверки значения каждой строки

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

function CheckCountOfSelectedIncident() {

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

    var check_count = $countChecked;

    alert(check_count);

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

        alert(checkedIRIds);
    });
}

У меня также есть проблема с css, потому что флажок в строке не кликабелен в центре, и вы можете видеть на изображении , флажок не выровнен по центру.И я не могу настроить это через CSS.Это HTML,

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

Это полный флажок css.

.checkbox {
padding-left: 20px;
}

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

    .checkbox label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 17px;
        height: 17px;
        left: 0;
        margin-left: -20px;
        border: 2px solid #cccccc;
        border-radius: 3px;
        background-color: #fff;
        -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    }

    .checkbox label::after {
        display: inline-block;
        position: absolute;
        width: 16px;
        height: 16px;
        left: 0;
        top: 0;
        margin-left: -20px;
        padding-left: 3px;
        padding-top: 1px;
        font-size: 11px;
        color: #555555;
    }

.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
    opacity: 0; /*modified*/
    z-index: 1;
    cursor: pointer;
}

    .checkbox input[type="checkbox"]:focus + label::before,
    .checkbox input[type="radio"]:focus + label::before {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

    .checkbox input[type="checkbox"]:checked + label::after,
    .checkbox input[type="radio"]:checked + label::after {
        font-family: "FontAwesome";
        content: "\f00c";
    }

    .checkbox input[type="checkbox"]:indeterminate + label::after,
    .checkbox input[type="radio"]:indeterminate + label::after {
        display: block;
        content: "";
        width: 10px;
        height: 3px;
        background-color: #555555;
        border-radius: 2px;
        margin-left: -16.5px;
        margin-top: 7px;
    }

    .checkbox input[type="checkbox"]:disabled,
    .checkbox input[type="radio"]:disabled {
        cursor: not-allowed;
    }

        .checkbox input[type="checkbox"]:disabled + label,
        .checkbox input[type="radio"]:disabled + label {
            opacity: 0.65;
        }

            .checkbox input[type="checkbox"]:disabled + label::before,
            .checkbox input[type="radio"]:disabled + label::before {
                background-color: #eeeeee;
                cursor: not-allowed;
            }

.checkbox.checkbox-circle label::before {
    border-radius: 50%;
}

.checkbox.checkbox-inline {
    margin-top: 0;
}

.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
    background-color: #337ab7;
    border-color: #337ab7;
}

.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
    background-color: #5bc0de;
    border-color: #5bc0de;
}

.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}

.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
    background-color: #5cb85c;
    border-color: #5cb85c;
}

.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
    color: #fff;
}

Answer 1

Если вам нужны все выбранные идентификаторы флажков, вы можете пройти с этим примером.Надеюсь, что это поможет вам ..

Это даст вам все идентификаторы через запятую, тогда вы можете делать любые манипуляции с этими идентификаторами.

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

и ваш скрипт должен быть похож наthis

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

Пример JS Fiddle