javascript - bool 复选框，设置文本字段的值-6ren

javascript - bool 复选框，设置文本字段的值

转载作者：行者123 更新时间：2023-11-28 19:50:21

25

4

我正在尝试创建一个表单，您可以在其中通过 primefaces slider 组件给出一个范围，并可选择精确或不精确的上限(即范围的上限可以是 1000 或 >1000)。范围的可选性通过复选框指示。

在一个表单中，我有以下组件:

<p:outputLabel value="From 1:"  />
<p:inputText style="display: block;margin-bottom: 3px;" id="lower" value="#{dilution.lower}" />
<p:outputLabel value="To 1:" />
<p:inputText style="display: block;margin-bottom: 3px;" widgetVar="upp" id="upper" value="#{dilution.upper}" />
<p:outputLabel value="Greater than 1000" for="above1000" />
<p:selectBooleanCheckbox id="above1000" value="#{dilution.bigger}" valueChangeListener="#{dilution.above}"  >
    <p:ajax update="upper" />
</p:selectBooleanCheckbox>
<h:outputText style="display: block;" id="displayRange" value="Choose from intervall 1:1 till 1:1000"/>                        
<p:slider id="dfact" displayTemplate="For intervall 1:{min} till 1:{max}" for="lower,upper" range="true" step="1" minValue="1" maxValue="1000" />

选中该复选框后，我希望将上限文本字段中的值更改为 1000，如果未选中该复选框，我不希望它更改文本字段的值。

我几乎已经使用附加到复选框的 valueChangeListner 来完成此操作。

在支持 bean dilution 中，我有以下 valueChangeListner:

public void above(ValueChangeEvent event){
    if((Boolean)event.getNewValue()){
        upper = 1000;
    }        
}

它将文本字段upper的值设置为1000。我的问题是，如果我将文本字段的值更改为其他数字，然后取消选中文本框，它就会执行此操作。

我猜测这是因为 upper 支持 bean 值仍设置为上次的 1000。我尝试让 ajax 调用处理 upper 组件，如下所示:

<p:ajax update="upper" process="upper" />

因为我认为这会使其在更新之前处理 upper 组件(并因此根据文本字段中写入的内容更改支持 bean 值)。但是当我这样做时，文本字段根本没有设置。

然后我觉得也许使用 javascript 来做到这一点更有意义，避免了对服务器的任何不必要的调用，但不知道如何做到这一点。我考虑过以某种方式使用 widgetVar 但我找不到任何文档告诉我如何使用它。

如果更改文本字段中的值会更改 slider 的设置位置，那就太好了，但这不太重要。

有任何提示什么是最好的方法吗？

最佳答案

您尝试做的方式不正确。

我已经为您重写了示例

XHTML 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions">

<h:head>
    <title>Demo</title>
    <script type="text/javascript">

</script>
    <link rel=" stylesheet" type="text/css" href="css/style.css"></link>

    <h:body>
        <h:form id="form">
            <p:panel header="Form">

                <h:panelGrid columns="2">

                    <h:outputText value="From:" />
                    <p:inputText value="#{testBean.lower}" id="lower"></p:inputText>

                    <h:outputText value="To:" />
                    <p:inputText value="#{testBean.upper}" id="upper"></p:inputText>

                    <h:outputText value="Change Upper to Max" />
                    <p:selectBooleanCheckbox value="#{testBean.maxUpper}">
                        <p:ajax event="change" listener="#{testBean.chageMax}"
                            update=":form:upper"></p:ajax>
                    </p:selectBooleanCheckbox>

                    <h:outputText style="display: block;" id="displayRange"
                        value="Choose from intervall 1:1 till 1:1000" />
                    <p:slider id="dfact"
                        displayTemplate="For intervall 1:{min} till 1:{max}"
                        for=":form:lower,:form:upper" range="true" step="1" minValue="1"
                        maxValue="1000" />
                </h:panelGrid>

            </p:panel>
        </h:form>

    </h:body>

</h:head>

</html>

托管 Bean(后端 Bean)

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "testBean")
@SessionScoped
public class TestBean {

    private int lower;
    private int upper;
    private boolean maxUpper;

    public void chageMax() {
        if (maxUpper) {
            upper = 1000;
        } else {
            upper = 0;
        }
    }

    public boolean isMaxUpper() {
        return maxUpper;
    }

    public void setMaxUpper(boolean maxUpper) {
        this.maxUpper = maxUpper;
    }

    public int getLower() {
        return lower;
    }

    public void setLower(int lower) {
        this.lower = lower;
    }

    public int getUpper() {
        return upper;
    }

    public void setUpper(int upper) {
        this.upper = upper;
    }
}

生成的输出

Initial page load

When tick box selected

Using Slider

希望对您有所帮助。

关于javascript - bool 复选框，设置文本字段的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23560283/

25

4

0

文章推荐： testing - Visual Studio 编码 UI 测试的替代方案

文章推荐： scala sbt 测试在多个项目上运行一次设置和清理命令

文章推荐： python - psycopg2 执行返回日期时间而不是字符串

c# - 如何将 bool 转换为可为 null 的 bool(bool？)
我有一个带有列的表提供者 implied(tiny int)(something like nullable bool) provi
c# - 为什么编译器将 bool 转换为整数并返回 bool 而不是返回 bool 本身？
我正在阅读 VideoFileWriter来自 AForge.Video.FFMPEG 的类(class)通过 ILSPY 组装(我很想看看特定方法是如何工作的)并发现了这个: public bool
flutter - 无法将类型 'bool?' 的值分配给类型 'bool' 的变量，因为 'bool?' 可以为 null，而 'bool' 则不能
这是我的完整代码... import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import
haskell - 从 [Maybe Bool] 中获得一个 Bool，该 Bool 保证至少包含一个 Just
我有一个输入 list类型 [Maybe SomeType]和一个谓词 p类型 SomeType -> Bool ，我想回答这个问题“谓词 p 是否适用于所有碰巧在输入中的 SomeType ？”。
转换为 bool : `!!` vs `(bool)`
使用 !!x 有什么区别吗？对比(bool)x ？假设__STDC_VERSION__ >= 199901L和 #include 他们都保证结果是0吗？或 1 ，并且无论 x 的大小和值如何，都不
c++ - (bool | bool) 安全吗？
我正在编写一些 C++ 代码，我想调用两个函数(checkXDirty 和 checkYDirty)，并返回 true如果任一返回 true。即使一个返回 true 我也需要评估两者，所以我的第一个想
c++ - "#define bool bool"当我悬停 bool 时说 QtCreator - 我将其跟踪到 boost::asio
我注意到 bool在 QtCreator 中以不同于其他类型的颜色突出显示: 只有在包含某些 header 时才会发生这种情况，最终我将其追踪到 . QtCreator 的代码检查器似乎无法手动跟踪
ios - 类型 "Int -> Bool","Int-> Bool -> Int","Int-> String -> Int－> Bool"
有一个函数: func (first: Int) -> Int -> Bool -> String { return ? } 返回值怎么写？我对上面 func 的返回类型感到很困惑。最
python - 为什么 tf.cond() 将 tf.bool 识别为 python bool 而不是 tf.bool？
训练神经网络学习“异或” 我正在尝试使用“批量归一化”，我创建了一个批量归一化层函数“batch_norm1”。 import tensorflow as tf import nump
c# - 如何从 C# 中的异步任务函数获取 bool 结果 - 错误 : Cannot implicitly convert type `void' to `bool'
我已经创建了任务函数来验证我的 json 文件。一切正常，直到我没有使用结果。当我试图从 async task function 获得结果时它显示错误为 Cannot implicitly conve
Swift.Bool 不是 Bool 吗？
我有一个函数 func login (parameters: [(String, Any)], completion: @escaping (Bool) -> Vo
正则表达式用 bool 替换 bool 值
我正在处理最近从 X/Motif 转移到 Qt 的 C++ 代码库。我正在尝试编写一个 Perl 脚本，它将用 bool 替换所有出现的 Boolean(来自 X)。该脚本只是做了一个简单的替换。 s
flutter - 无法将参数类型Future 分配给参数类型 'bool'
嗨，我正尝试创建一个Visiblity小部件，如果用户在Firebase数据库阵列上，该小部件将显示。看起来像这样(成员数组): 如您所见，我创建了一个StreamBuilder，如果当前用户的用户名
if-statement - Flutter中的Future vs bool
我创建了如下的rest api方法， Future activateAccount(int id, int code) async{ final body = {"code": '$c
flutter - 如何将Future 转换为Stream
在我的Flutter应用中，我有一个返回Future的函数，但我想将结果作为Stream。这是函数: Future isGpsOn() async { if (await Geolocat
SQLAlchemy bool 值与 bool 值
我可以看到 BOOLEAN 覆盖了 __visit_name__ class BOOLEAN(Boolean): __visit_name__ = 'BOOLEAN' 控制调度员选择的访问者方
c# - 分配 bool 值？ bool
考虑以下代码: bool x; bool? y = null; x = y?? true; 将 bool? 分配给 bool 是一个编译时错误，但上面的代码在编译和运行时都成功了。为什么？尽管第三条语
javascript( bool 值 ^ bool 值)
我正在重写一些 Javascript 代码以在 Excel VBA 中工作。由于在这个网站上搜索，我已经设法翻译了几乎所有的 Javascript 代码!但是，有些代码我无法准确理解它在做什么。这是一
boolean - 预期类型 `bool` ，发现类型 `&bool`
我想拍一张bool来自Vec并在 if 语句中进行比较。如何解决以下错误？ | 7 | if cell { | ^^^^ expected
ios - bool _WebTryThreadLock(bool) 崩溃
我在我的应用程序崩溃跟踪工具中发现了一些崩溃。基本上我有一个 tabBarController，其中一个选项卡有一个嵌入式 UIWebView，另一个选项卡有一个带有 UITableView 的 Co

首页

博学

6Ren·AI

商城

javascript - bool 复选框，设置文本字段的值