Question

我有一长串复选框，每个复选框旁边都有一个链接。类似的东西：

<form name="checkboxlist" action="..." >
    <input type="checkbox" id="1" name="pageCB" value="1"/>
    <a id="1" href="#" onclick="sub(id)>click here</a>
    <input type="checkbox" id="2" name="pageCB" value="2"/>
    <a id="2" href="#" onclick="sub(id)>click here</a>
    ...
    ...
    <input type="submit" />
</form>

我目前正在尝试使用：

<script>
    function sub(id){
        $("input:checkbox[value=id]").attr("checked", true);
        document.checkboxlist.submit(); 
    }
</script>

但是这显然没有读取变量id，我真的想避免为每个id创建if语句，因为它们有几百个。有没有办法做到这一点？

Answer 1

您不应使用应使用<label>标记的链接。

这就是为它做的。

<input type="checkbox" name="mybox" id="mybox">
<label for="mybox">Click this box</label>

这适用于所有表单字段，并且比构建JS以执行已存在的操作更好。

Answer 2

编辑：我看到你也在使用重复的ID。这是无效的，当按ID选择时，事情将无法正常工作。

HTML4中的数字ID无效。

无论如何，改变这个：

$("input:checkbox[value=id]")

到此：

$("input:checkbox[value='" + id + "']")

这将id的值连接到选择器字符串中，并且我还在属性选择器值周围添加了引号，因为文档需要它们。

将内联处理程序更改为：

<a id="2" href="#" onclick="sub(this.id)>click here</a>

...因为this是对点击元素的引用，所以this.id是对其ID属性的引用。

Answer 3

如果我理解正确，您希望通过单击关联的元素来支持选中复选框，并在点击时提交表单。我建议a）使用<label>元素代替<a>，因为它们可以通过id与b输入相关联。）不要使用数字，重复的id属性。

<form name="checkboxlist" action="#">
    <input type="checkbox" id="a" name="pageCB" value="1"/>
    <label for="a">Click here</label>
    <input type="checkbox" id="b" name="pageCB" value="2"/>
    <label for="b">Click here</label>
</form>    

<script>
    $(document).ready(function() {
        $('input:checkbox').change(function(){
            $(this).parent('form').submit();
        });
    });
</script>

如何使用变量名，ID，值设置复选框的链接

3 个答案: