Question

我有以下

protected void uploadFile(CharSequence... keys) {
    if (((WrapsDriver) driver).getWrappedDriver() instanceof PhantomJSDriver) {
        StringBuffer s = new StringBuffer(keys.length);
        for (int index = 0; index < keys.length; index++) {
            s.append(keys[index].toString());
        }
        ((PhantomJSDriver) ((WrapsDriver) driver).getWrappedDriver()).executePhantomJS(
                String.format("var page = this; page.uploadFile(arguments[0], '%s');", s.toString()), getElement());
    } else {
        getElement().sendKeys(keys);
    }
}

我喜欢点击第一个复选框，第二个div中ID为“check21”的所有复选框都会自动进行查询。

<form class="form-inline" role="form">
    <div class="col-xs-3">
        <div class="pic-container">

                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check11' value="">ciao</span><br>
                    </label>

        </div>
    </div>
    <div class="col-xs-3">
        <div class="pic-container">

                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
                    </label>
        </div>
    </div>
</form>

我使用了以下脚本，但只适用于第一个脚本。我想使用id，因为名称和值将用于通过表单发送sql请求。

Answer 1

正如评论中指出的那样，ID 必须是唯一的，因此如果您愿意，可以将它们更改为类。然后你可以使用这个jQuery：

$('input.check11').click(function(){
  $('input.check21').prop('checked',this.checked)
})

<强> bootply example

另外，删除那些内联事件处理程序。

Answer 2

如前所述，网页上的每个元素都应该有唯一的ID。

但是，它仍然可以使用 querySelectorAll 完成，如下所示：

function handleChange(cb) {
    var allCB = document.querySelectorAll("input[id='check21']");
    for(var i=0; i< allCB.length; i++){
        allCB[i].checked=true;
    }
}

Here is the JSFiddle demo

Answer 3

ID背后的想法是它们是独一无二的。它允许您使用getElementById函数获取单个元素，而其他getElementsByXXX函数返回元素列表（因此getElement s 中的s）。

当您检索POST数据（通过PHP或其他服务器语言）时，您需要检查是否设置了名为name属性的变量。如果是，则选中复选框。拥有多个具有相同名称的复选框将不起作用。 This other SO answer解释了如何使用复选框中的POST数据。

如果您选择使用name="something[]"表示法，则可以选中第二个div的所有框：

var checkboxes = myDiv.getElementsByName("something[]");
for(var i=0; i < checkboxes.length; ++i) {
    checkboxes[i].checked = true;
}

你也可以使用类，但我认为只要你已经需要使用表单的名称，这会使代码膨胀。

Javascript检查具有相同ID的所有复选框

3 个答案: