javascript - 保留具有相同名称的多个复选框的复选框状态

Question

我有一个由 ajax 生成的内容页面，并用一排复选框进行组织。单击任何复选框都会将参数传递到 URL 中，并用于创建 SQL 查询。我想将复选框添加到页面的其他部分，但是当我这样做时，我无法保持复选框的样式(有用于选中和未选中状态的自定义样式)。单击任意一行复选框将正确组织数据，但只有一行复选框将显示选中/选中状态。

我使用以下代码来设置复选框的样式:

$(':checkbox').change(function() {
    if($(this).is(":checked")) {
        $(this).next('label').children('div').removeClass("sort-not-active").addClass("sort-active");
    }
    else {
        $(this).next('label').children('div').removeClass("sort-active").addClass("sort-not-active");
    }
});

我的复选框的 HTML 如下。我认为我的样式问题可能是由于我将变量作为 ID 而不是类传递而引起的，但是每当我删除 ID 时，复选框就会完全停止工作。

<?php foreach (array_unique($disciplines) as $discipline): ?>
    <input class="disciplinechecks" type="checkbox" id="<?php echo $discipline; ?>" name="<?php echo $discipline; ?>" value="<?php echo $discipline; ?>" onChange="checkBoxChange(this.checked,'<?php echo $discipline; ?>');">
    <label for="<?php echo $discipline; ?>">
        <div class="sort-genre sort-active"><?php echo $discipline; ?></div>
        <span></span>
    </label>
<?php endforeach ?>

下面是我用来将值传递到 URL 的函数。这里没有任何内容引用 ID，所以我无法弄清楚为什么从复选框中删除 ID 会破坏它:

var typeItemsChecked = Array( ALL OF THE $DISCIPLINE VALUES ARE HERE );

function checkBoxChange(x,y) {
    if(x){
        var type = y;
        typeItemsChecked.push(type);
        showUser();
    }
    else {
        var type = y;
        typeItemsChecked.remove(type);
        showUser();
    }
}

function getURLString() {
    joinedTypeItemsChecked = typeItemsChecked.join();
    var queryString = [
        ("d="+joinedTypeItemsChecked)
    ];

    var url = queryString.join("&");
    return url;
}

这是 PHP 后的 HTML 的样子

<input class="disciplinechecks" type="checkbox" id="Web Design" name="Web Design" value="Web Design" onChange="checkBoxChange(this.checked,'Web Design');">
<label for="Web Design">
    <div class="sort-genre sort-active">Web Design</div>
    <span></span>
</label>

<input class="disciplinechecks" type="checkbox" id="Print Design" name="Print Design" value="Print Design" onChange="checkBoxChange(this.checked,'Print Design');">
<label for="Print Design">
    <div class="sort-genre sort-active">Print Design</div>
    <span></span>
</label>

Answer 1

好吧，所以，在阅读了您的评论回复后，您的原始帖子中没有任何内容立即引起我的注意，但是您的“已处理”代码存在一些问题(特别是围绕 id 和 name 属性)可能会给您带来麻烦。具体来说:

1. id 属性不能包含空格(有关有效 id 值的更多信息，请参阅此处: What are valid values for the id attribute in HTML? )

2. id 值在页面内必须是唯一的

3. 具有相同 name 属性的多个复选框(以及单选按钮)被视为分组(即，有点像它们是一个输入)。

现在，浏览器通常对这些事情相当宽容，但脚本语言可能会变得非常困惑。因此，在进一步调试之前，我建议将 PHP 更新为:

• 在分配 id 属性时，去掉 $discipline 值中的所有空格。虽然 name 属性可以包含空格，但作为一般做法，我也会避免在那里使用它们。
• 使用某种索引值(或类似的值)来区分两组复选框之间的 id 和 name 值。

<小时/>

附注。 。 .

。 。 。还有一些地方可以简化您的代码。 。 。这样做还将减少可能出现错误的地方的数量。具体来说:

在样式的 JS 代码中，尝试以下操作:

$(':checkbox').change(function() {
    $(this).next().children('div').toggleClass("sort-not-active sort-active");
});

• 无需在 next() 调用中指定 'label'，因为它始终是复选框的下一个同级
• 如果默认类设置正确，那么您所需要做的就是在复选框更改时切换这两个类。由于复选框只能处于两种状态，因此类的组合也只能处于两种状态。

对于捕获复选框的代码，您可以将其简化为:

function checkBoxChange(x,y) {
    if (x) {
        typeItemsChecked.push(y);
    }
    else {
        typeItemsChecked.remove(y);
    }
    showUser();
}

我不认为这会导致您所看到的问题，但我只是认为我会放弃它以帮助稍微降低复杂性。 :)

<小时/>

所以，我不保证这些中的任何一个都会解决您所看到的问题(实际上，仅使用您提供的原始 JS 样式和 HTML 示例，一切对我来说都工作得很好Firefox)，但我确实知道某些浏览器和脚本语言可能非常挑剔，不遵循正确的 HTML 规则。尝试解决其中一些问题，看看您遇到的问题是否消失。如果没有，我们可以使用您的新代码重试。