JQuery - TriState CheckBox

47 浏览
0 Comments

JQuery - TriState CheckBox

我正在尝试寻找一个三态复选框插件。然而,我发现的每个插件都依赖于元素的层次结构(比如文件夹结构)。我只有一个单独的复选框元素,我想要将其变成一个三态复选框。\n有没有人知道一个可以实现这个功能的jQuery插件?我真的很惊讶在http://plugins.jquery.com/上找不到一个可用的插件。\n谢谢你的帮助。

0
0 Comments

JQuery - TriState CheckBox 是一个过时的插件,它使用图片来模拟功能。这个问题的出现原因是插件过时了,无法适应现代的需求。为了解决这个问题,可以尝试以下方法。

首先,我们可以使用最新的 jQuery 库,以确保插件能够正常运行。可以从官方网站 https://jquery.com/ 下载最新版本的 jQuery。

然后,我们需要找到一个功能相似且更新的插件来替代旧的 TriState CheckBox 插件。可以在 jQuery 插件库 https://plugins.jquery.com/ 中搜索并下载一个新的 TriState CheckBox 插件,确保它具有最新的功能和兼容性。

接下来,我们需要按照新插件的文档和示例来使用它。通常,插件会提供一些选项和方法来控制 TriState CheckBox 的行为。我们可以在 HTML 文件中引入新的插件文件,并按照文档中的指示来初始化和使用 TriState CheckBox。

最后,我们可以根据需求进一步自定义 TriState CheckBox 的样式和行为。可以使用 CSS 来修改样式,并使用 jQuery 的事件处理函数来处理用户与 TriState CheckBox 的交互。

通过以上步骤,我们可以解决旧的 TriState CheckBox 插件过时的问题,并使用更新的插件来实现 TriState CheckBox 的功能。这样,我们就能够满足现代需求,并提供更好的用户体验。

0
0 Comments

JQuery - TriState CheckBox问题的出现原因是需要显示三种状态:启用/禁用/忽略。根据jquery ui提供的图标,我创建了以下代码:

HTML代码如下:


控件通过data-state-values中的json数组来指定旋转的状态:

- value: 输入框中的值

- class: 新span元素的CSS类

- title: 可选的标题,将在创建的span元素中设置

控件基本上创建了一个``元素,并在点击时通过循环给定的值列表来更新它。

当通过其他方式改变值(例如直接设置输入框的值)时,代码也可以处理并在触发`$("input").change();`事件时更新"control"。

处理它的JQuery代码如下:

/* rotatestate stontrol */
$("input.rotatestate", location).each(function(){
    var states = $(this).attr("data-state-values");
    var defaultClass = $(this).attr("data-state-class");
    // no need to continue if there are no states
    if(!states) {
        return;
    }
    try {
        states = JSON.parse(states);
    } catch (ex) {
        // do not need to continue if we cannot parse the states
        return;
    }
    var stateControl = $("");
    if($(this).attr("data-state-style")) {
        stateControl.attr("style", $(this).attr("data-state-style"));
    }
    stateControl.data("states", states);
    stateControl.data("control", this);
    stateControl.data("activeState", null);
    $(this).data("control", stateControl);
    if(defaultClass) {
        stateControl.addClass(defaultClass);
    }
    // click on the control starts rotating
    stateControl.click(function(){
        var cState = $(this).data().activeState;
        var cStates = $(this).data().states;
        var control = $(this).data().control;
        var newState = null;
        if(cState != null) {
            // go to the 'next' state
            for(var i = 0; i < cStates.length; i++) {
                if(cStates[i].value === cState.value) {
                    // last element
                    if(i === cStates.length - 1) {
                        newState = cStates[0];
                    } else {
                        newState = cStates[i+1];
                    }
                    break;
                }
            }
        } else {
            // no state yet - just set the first
            newState = cStates[0];
        }
        $(control).attr("value", newState.value);
        // trigger change
        $(control).change();
    });
    // make sure to update state if the value is changed
    $(this).change(function(){
        var control = $($(this).data().control);
        var cState = control.data().activeState;
        var cStates = control.data().states;
        if(cState != null) {
            // remove "old state"
            control.removeClass(cState['class']);
        }
        // add new State
        var val = $(this).val();
        $.each(cStates, function(){
            if(this.value === val) {
                control.data().activeState = this;
                if(this.title) {
                    control.attr("title", this.title);
                }
                control.addClass(this['class']);
                return false;
            }
        });
    });
    // trigger initial state
    $(this).change();
    $(this).after(stateControl);
    $(this).hide();
});

该控件还是我在[https://github.com/corinis/jsForm/wiki/Controls](https://github.com/corinis/jsForm/wiki/Controls)上的表单控件库的一部分。

0
0 Comments

JQuery - TriState CheckBox 是一个可以实现三个状态的复选框的插件。这个问题的出现是因为一些答案已经过时,因为jQuery重做了他们的插件网站。"Tristate"(不确定)复选框已经内置在JavaScript中,通过简单地在它们上设置一个属性就可以将它们设置为这种状态。更多信息请参考:http://css-tricks.com/indeterminate-checkboxes/

代码:$("#some-checkbox").prop("indeterminate", true);

在新的jQuery插件网站上有一个可用的插件,提供了这个功能:http://plugins.jquery.com/tristate-checkbox/

这个插件提供了三个状态:选中、未选中和不确定。它根据子复选框是否都被选中来提供不确定状态。

0