Question

美好的一天，

我曾经在一个漫长的黑暗过去发现了一些代码来检查或取消选中所有配对的复选框。

现在我不小心使用了两次代码。我注意到所有带有相同名称的复选框都被选中了。因此，重复ID或名称的问题。

现在我想改变它。但是，只要对现有代码进行一些小改动，脚本就会停止工作。而且我不知道脚本会在什么行上被损坏＆＃34;。

这是HTML代码

<table class="panel_checkboxes" style="top: -20px;">
    <tr>
        <th>Select ALL</th>
        <th>
        <input id="selectall" class="regular-checkbox small-checkbox" type="checkbox" /><label for="selectall" style="margin-left: 25px;"></label></th>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td>Location 4</td>
        <td>
        <input id="checkbox-panel-4" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="4" /><label for="checkbox-panel-4" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Location 6</td>
        <td>
        <input id="checkbox-panel-6" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="6" /><label for="checkbox-panel-6" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Location 5</td>
        <td>
        <input id="checkbox-panel-5" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="5" /><label for="checkbox-panel-5" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Location 7</td>
        <td>
        <input id="checkbox-panel-7" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="7" /><label for="checkbox-panel-7" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Location 3</td>
        <td>
        <input id="checkbox-panel-3" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="3" /><label for="checkbox-panel-3" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Location 2</td>
        <td>
        <input id="checkbox-panel-2" checked="checked" class="regular-checkbox small-checkbox selectedpanelsId" name="panels_set[]" type="checkbox" value="2" /><label for="checkbox-panel-2" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
</table>

JQUERY代码：

//<![CDATA[ 

$(document).ready(function () {
    $('#selectall').click(function () {
        $('.selectedpanelsId').prop('checked', isChecked('selectall'));
    });
});
function isChecked(checkboxId) {
    var id = '#' + checkboxId;
    return $(id).is(":checked");
}
function resetSelectAll() {
    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    if ($(".selectedpanelsId").length == $(".selectedpanelsId:checked").length) {
        $("#selectall").attr("checked", "checked");
    } else {
        $("#selectall").removeAttr("checked");
    }

    if ($(".selectedpanelsId:checked").length > 0) {
        $('#edit').attr("disabled", false);
    } else {
        $('#edit').attr("disabled", true);
    }
}
//]]>

现在我想要的是将ID selectall 更改为 selectallLocations 并将课程： selectedpanelsId 更改为 SelectedLocationsID

注意我创造了一个小提琴，所以你可以看到我的意思：

JS Fiddle

Answer 1

<强> HTML：

<table class="panel_checkboxes" style="top: -20px;">
    <tr>
        <th>Select ALL</th>
        <th>
        <input id="selectallLocations" class="regular-checkbox small-checkbox" type="checkbox" /><label for="selectall" style="margin-left: 25px;"></label></th>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td>Location 4</td>
        <td>
        <input id="checkbox-panel-4" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="4" /><label for="checkbox-panel-4" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Location 6</td>
        <td>
        <input id="checkbox-panel-6" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="6" /><label for="checkbox-panel-6" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Location 5</td>
        <td>
        <input id="checkbox-panel-5" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="5" /><label for="checkbox-panel-5" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Location 7</td>
        <td>
        <input id="checkbox-panel-7" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="7" /><label for="checkbox-panel-7" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Location 3</td>
        <td>
        <input id="checkbox-panel-3" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="3" /><label for="checkbox-panel-3" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Location 2</td>
        <td>
        <input id="checkbox-panel-2" checked="checked" class="regular-checkbox small-checkbox SelectedLocationsID" name="panels_set[]" type="checkbox" value="2" /><label for="checkbox-panel-2" style="margin-left: 25px;"></label></td>
        <td>&nbsp;</td>
    </tr>
</table>

<强>脚本：

$(document).ready(function () {
    $('#selectallLocations').click(function () {
        $('.SelectedLocationsID').prop('checked', isChecked('selectallLocations'));
    });
});

function isChecked(checkboxId) {
    var id = '#' + checkboxId;
    return $(id).is(":checked");
}

function resetSelectAll() {
    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    if ($(".SelectedLocationsID").length == $(".SelectedLocationsID:checked").length) {
        $("#selectallLocations").attr("checked", "checked");
    } else {
        $("#selectallLocations").removeAttr("checked");
    }

    if ($(".SelectedLocationsID:checked").length > 0) {
        $('#edit').attr("disabled", false);
    } else {
        $('#edit').attr("disabled", true);
    }
}

检查更新的DEMO

HTML + JQuery选中所有复选框，修改现有代码

1 个答案: