按顺序读取选中的复选框
程序员文章站
2022-05-31 13:14:08
...
按顺序读取选中的复选框
一、效果
二、代码
<!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); //返回指定值在数组中的索引。如果没有找到，则返回 -1
let 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>