按顺序读取选中的复选框

一、效果

二、代码

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"><head><meta charset="UTF-8"><title>按顺序读取选中的复选框</title><style>body{margin: 20px;}</style><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script></head><body><label><input type="checkbox" name="direction" value="东"/>东<!-- checked="checked" --></label><label><input type="checkbox" name="direction" value="南"/>南</label><label><input type="checkbox" name="direction" value="西"/>西</label><label><input type="checkbox" name="direction" value="北"/>北</label><button>查看选中顺序</button></body><script>let chooseCheckbox = new Array();   //定义选中数组$("input[name='direction']").click(function () {let value = $(this).val();  //当前复选框的值let index = $.inArray(value, chooseCheckbox); //返回指定值在数组中的索引。如果没有找到，则返回 -1let isChecked = $(this).prop('checked');    //是否选中if (isChecked) { //如果选中if(index == -1){  //不存在，把值压入数组尾部chooseCheckbox.push(value);}} else {    //如果取消if(index != -1){  //数组中存在，移除数组指定元素(当前点击复选框的值)chooseCheckbox.splice($.inArray(value, chooseCheckbox), 1);}}});//按钮点击事件$('button').click(function () {alert('您选择的顺序是：' + JSON.stringify(chooseCheckbox) );});</script>
</html>

按顺序读取选中的复选框相关推荐

jQuery分别获取选中的复选框值
jQuery分别获取选中的复选框值原文:jQuery分别获取选中的复选框值 function jqchk(){ //jquery获取复选框值 var s=''; $('input[na ...
jsp数组自动转换html,jsp页面将选中的复选框转数组传到后台
ajax选中的复选框转数组传到后台 var selectedItems = new Array(); $(':input[class=ids][checked]').each(function() { ...
JavaScript—有关如何实现全选/全不选、检查是否选中了复选框。
一.Javacript设置全选的方法:首先创建一个HTML示例文件:然后添加script标签并创建js代码:最后通过循环遍历每个checkbox对象,将其checked属性设置为true实现全选功能即 ...
JS jQuery分别获取选中的复选框值
转载地址 http://hi.baidu.com/lipan4/blog/item/8531c62330ee73b04623e886.html <!DOCTYPE html PUBLIC &qu ...
jquery获取所有选中的复选框
jquery获取所有选中的复选框提示:在列表中总有一些需求会在表头用到复选框进行批量操作,在此我介绍一下怎么获取到已选中的复选框值示例:如下所示,获取到数组之后1,通过ajax传给后台进行处理就好 ...
获取选中状态复选框的值并添加id
多个复选框,现在点击选中首先是js: $("input:radio").click(function() {var sid=$('#template input:radio:ch ...
html控制复选框选中,选中HTML复选框
这是我的问题:我有一个带复选框的html模板.当php脚本运行时,它会将一个值传递给复选框的"checked"属性,如下所示: 其中{SHOW_PRODUCTS}可以是'check ...
react动态改变选中不选中_当使用react hooks选中任何复选框时,如何使启用按钮起作用?...
当选中任何复选框时,我在启用按钮时有一个错误.目前它在第一次点击时不起作用,而只在第二次点击时起作用.取消选中复选框也适用于第一次单击.我认为这与各州有关,但我不太明白是什么导致了这个问题. chec ...
用jQuery实现复选框全选、反选与获取选中的复选框的值
实现效果如下所示: 全选状态: 不全选状态: 反选状态: 用jQuery实现以上效果要比js简单的多不亏是jQuery,写得少做的多话不多说,直接上代码!! html: <div class ...
Jquery获取被选中的复选框的value值
以下为使用JQuery获取input checkbox被选中的值代码: <html><head><meta charset="gbk">< ...

按顺序读取选中的复选框

按顺序读取选中的复选框相关推荐

最新文章

热门文章