JQuery - TriState CheckBox
JQuery - TriState CheckBox
我正在尝试寻找一个三态复选框插件。然而,我发现的每个插件都依赖于元素的层次结构(比如文件夹结构)。我只有一个单独的复选框元素,我想要将其变成一个三态复选框。\n有没有人知道一个可以实现这个功能的jQuery插件?我真的很惊讶在http://plugins.jquery.com/上找不到一个可用的插件。\n谢谢你的帮助。
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 的功能。这样,我们就能够满足现代需求,并提供更好的用户体验。
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)上的表单控件库的一部分。
JQuery - TriState CheckBox 是一个可以实现三个状态的复选框的插件。这个问题的出现是因为一些答案已经过时,因为jQuery重做了他们的插件网站。"Tristate"(不确定)复选框已经内置在JavaScript中,通过简单地在它们上设置一个属性就可以将它们设置为这种状态。更多信息请参考:http://css-tricks.com/indeterminate-checkboxes/
代码:$("#some-checkbox").prop("indeterminate", true);
在新的jQuery插件网站上有一个可用的插件,提供了这个功能:http://plugins.jquery.com/tristate-checkbox/
这个插件提供了三个状态:选中、未选中和不确定。它根据子复选框是否都被选中来提供不确定状态。