具有延迟的多个复选框选择以检查其他复选框更改
Multiple Checkbox Selection with Delay to Check for Other Checkbox Change
我被迫使用jQuery Mobile,尽管它是一个构建良好的系统,但我还是有些犹豫。因此,我有一个表单,当任何复选框发生更改时都可以提交。客户端希望这样,当他们点击一个页面时,页面会等待提交一段时间,这样,如果选择了另一个,则不会触发上一个请求,而会触发新的请求。它本质上是为了减少即时性,并允许更高效的过滤/请求。我的代码是这样的:
$( function() {
var sForm = "form[name='Waves']",
sCboxes = "input[type='checkbox']",
sWaves = "";
var $Cboxes = $(sForm + " " + sCboxes),
sChecked = sCboxes + ":checked";
$Cboxes.change( function(event) {
var $this = $(this);
if ( $this.attr("id") != "ClearAll" ) {
console.debug($(this));
console.debug('Changing page.');
sWaves = "";
// Form the string for the selected waves with standard check-if-it's-the-last
// element logic for comma generation.
$.each( $(sChecked) , function(i, v) {
var $this = $(this);
var iIndex = v.value;
sWaves += iIndex + ( ( i == $(sChecked).length - 1 ) ? "" : "," );
} );
console.debug("Waves to select: " + sWaves);
$.mobile.changePage("default.asp", {
data: { Wave: sWaves }, // Submit the previously formed string
type: "post"
} );
//$(sForm).submit();
} else {
$(sChecked).add( $(this) ).attr("checked", false).checkboxradio("refresh");
$.mobile.changePage("default.asp", {
data: { Wave: "" },
type: "post"
} );
}
} );
$("#ClearAll").click( function(event) {
event.preventDefault();
} );
$(".slideout").click( function(){
$(this).parents(".ui-collapsible").find(".ui-icon-minus").click();
} );
} );
表单的HTML:
<form ACTION="<%=ASP_SELF()%>" ID="Waves" METHOD="post" NAME="Waves">
<% ' Put the scripts we need here so that it loads with the page. %>
<script SRC="/base/scripts/scripts.js"></script>
<fieldset DATA-ROLE="controlgroup" DATA-TYPE="horizontal" STYLE="margin-left:5px; margin-bottom:0px; ">
<input TYPE="checkbox" NAME="#" ID="#" VALUE="Select Waves" CLASS="custom" />
<label CLASS="no-hover" FOR="#"> Waves: </label>
<input TYPE="checkbox" NAME="Wave1" ID="Wave1" VALUE="1" CLASS="custom" STYLE="width:70px !important; " <% If Instr(request("Wave"),"1") OR WaveOne = "YES" Then response.write " checked=""checked""" End If %> />
<label FOR="Wave1"> 1 </label>
<input TYPE="checkbox" NAME="Wave2" ID="Wave2" VALUE="2" CLASS="custom" STYLE="width:70px !important; " <% If Instr(request("Wave"),"2") OR WaveTwo = "YES" Then response.write " checked=""checked""" End If %> />
<label FOR="Wave2"> 2 </label>
<input TYPE="checkbox" NAME="Wave3" ID="Wave3" VALUE="3" CLASS="custom" STYLE="width:70px !important; "<% If Instr(request("Wave"),"3") OR WaveThree = "YES" Then response.write " checked=""checked""" End If %> />
<label FOR="Wave3"> 3 </label>
<input TYPE="checkbox" NAME="Wave4" ID="Wave4" VALUE="4" CLASS="custom" STYLE="width:70px !important; "<% If Instr(request("Wave"),"4") OR WaveFour = "YES" Then response.write " checked=""checked""" End If %> />
<label FOR="Wave4"> 4 </label>
<input TYPE="checkbox" NAME="ClearAll" ID="ClearAll" VALUE="Clear" CLASS="custom" $('input[data-type="search"]').TRIGGER("CHANGE").VAL(""); />
<label FOR="ClearAll"> Clear </label>
</fieldset>
</form>
我需要将$.mobile.changePage
调用延迟足够长的时间,以允许其他相关的复选框(在同一字段集中)也被切换。我感谢您的意见!这是一件非常重要的事情。
var timer;
var waitTime = 2000;
$Cboxes.change( function(event) {
if(timer)clearTimeout(timer);
timer = setTimeout(function(){
//your logic
},waitTime);
});
当改变事件被触发时,要执行的动作被安排在2000ms之后,如果用户之前改变主意,只需清除间隔并创建一个新的
延迟很容易实现。
$(function() {
var $form = $("form[name='Waves']"),
$Cboxes = $("input[type='checkbox']", $form),
timer = null
delay = 1000;
$cboxes.not("#ClearAll").change(function() {
// reset the current timer
window.clearTimeout(timer);
// create a new timer to delay form submission
timer = window.setTimeout(function() {
// get all the selected checkboxes as an array
// and create a comma separated string
var sWaves = $cboxes.is(":checked").map(function(item){
return item.value;
}).join(",");
$.mobile.changePage("default.asp", {
// Submit the previously formed string
data: { Wave: sWaves },
type: "post"
});
}, delay);
});
$("#ClearAll").change(function() {
$cboxes.attr("checked", false).checkboxradio("refresh");
$.mobile.changePage("default.asp", {
data: { Wave: "" },
type: "post"
} );
})
});
我还冒昧地简化了你的一些逻辑。尤其是在Array.join()
面前,字符串的创建显得过于复杂。
相关文章:
- JavaScript-切换“;全部检查”;复选框true/false
- 检查数据库中复选框的值
- JQuery:如何检查某个类的所有复选框是否都在表单中选中
- knockoutjs,复选框是有延迟的检查
- 关于复选框检查的困惑
- 复选框检查器在表中不起作用.代码在没有表标记的情况下工作
- 在复选框检查的更改功能上需要计算一个值
- 复选框检查事件验证没有 Javascript
- 我的JavaScript在复选框检查中有一些错误
- 如何使用angularjs根据复选框检查和取消选中来制作chckbox列表
- 如何使用AngularJS通过已检查的值进行复选框检查
- 根据复选框检查并设置url变量
- 如何在JavaScript/jQuery中弹出模态并运行复选框检查
- JavaScript复选框检查相关问题
- 如何使用输入复选框检查特定图像
- 复选框检查验证
- 数组复选框.检查javascript不工作
- 用于复选框检查的Java字符串到JavaScript字符串数组
- 复选框检查缓慢
- 我有麻烦得到复选框.检查工作