Javascript 我需要在XPages中的复选框旁边放置一个链接

我尝试使用链接而不是复选框标签，因为我希望在单击复选框时选中复选框，并在单击链接时发生其他事情

我曾尝试将链接放在复选框之后和复选框内部，但复选框似乎被包装在一个div中，导致其未对齐

这是我的密码

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:panel style="margin:20px">
        <xp:checkBox id="checkBox2"></xp:checkBox>
        <xp:link escape="true" text="Link2" id="link2"></xp:link>
        <xp:checkBox id="checkBox1">
            <xp:link escape="true" text="Link1" id="link1"></xp:link>
        </xp:checkBox>
    </xp:panel>
</xp:view>

这是生成的HTML

这是网页结果

---

有没有办法在复选框旁边添加一个xp:链接？

如果省略了DIV，最好是为复选框使用自定义渲染器。下面是一个很好的教程，介绍与组合框一起使用的自定义渲染器：

编辑

我做了一些事情： 创建如下Java类：

package org.openntf.bstemplate.renderer;

import java.io.IOException;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.render.Renderer;

public class Checkbox extends Renderer {

    @Override
    public void encodeBegin(final FacesContext context, final UIComponent component) throws IOException {
        ResponseWriter writer = context.getResponseWriter();
        writer.startElement("input", null);
        writer.writeAttribute("id", component.getClientId(context), null);
        writer.writeAttribute("name", component.getClientId(context), null);
        writer.writeAttribute("type", "checkbox", null);
    }

    @Override
    public void encodeEnd(final FacesContext context, final UIComponent component) throws IOException {
        ResponseWriter writer = context.getResponseWriter();
        writer.endElement("input");
    }

    @Override
    public void encodeChildren(final FacesContext context, final UIComponent component) throws IOException {
        super.encodeChildren(context, component);
    }

}

将此添加到您的faces配置：

<render-kit>
    <renderer>
        <component-family>javax.faces.Input</component-family>
        <renderer-type>custom.checkbox</renderer-type>
        <renderer-class>org.openntf.bstemplate.renderer.Checkbox
        </renderer-class>
    </renderer>
</render-kit>

javax.faces.Input
自定义复选框
org.openntf.bstemplate.renderer.Checkbox

在复选框中使用新的渲染器类型：

    <xp:checkBox
        text="Label"
        id="checkBox1"
        rendererType="custom.checkbox">
    </xp:checkBox>
    <xp:link
    escape="true"
    id="link1"
    text="Click me!">
    <xp:eventHandler
        event="onclick"
        submit="false">
        <xp:this.script><![CDATA[dojo.byId("#{id:checkBox1}").click();]]></xp:this.script>
    </xp:eventHandler>
</xp:link>

---

我认为使用CSS比使用自定义渲染器更容易。因为这看起来只是对齐问题。例如，您可以将内容放入表中（丑陋的解决方案警报）

---

当然，若你们不想使用桌子，你们应该试着玩一下div。这里的问题很明显，这个复选框和链接的容器太小，无法在一行中显示它们。

当然，您可以使用CSS来操纵DIV本身：

div.checkbox {
   float:left;
   margin-right: 10px;
}

---

为什么不使用checkBox的onclick事件？我不知道怎么做？根据用户是单击复选框还是单击标签/link，应该会发生不同的事情哦，我明白了，虽然这不是用户体验，因为单击标签通常会更改复选框值。生成的HTML不是默认呈现的结果。没有具有标准呈现和标准或OneUI主题的div。如果您使用XPages“开箱即用”，标签就在复选框旁边。可能是引导主题导致了它。使用这种方法，复选框的数据绑定不再起作用。我必须做些什么才能再次启用它？

div.checkbox {
   float:left;
   margin-right: 10px;
}