Question

我的表的每一行都有复选框，我的问题是，如果我使用了bootstrap复选框，那么我不会得到每个表的ID。但是，如果我使用普通的复选框，则可以成功获取每一行的正确ID。我的JavaScript有什么问题？有人可以帮我吗？预先感谢。

*复选框成功

<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也有问题，因为行中的复选框无法在中心单击，并且您可以在image处看到，该复选框未在中心对齐。而且我无法通过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

如果需要所有选中的复选框ID，则可以使用此示例。希望对您有帮助。.

它将以逗号分隔的方式为您提供所有ID，然后您可以对该ID进行任何操作。

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

您的脚本应该是这样

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

JS Fiddle Example

获取表mvc中每行的复选框成功值

1 个答案: