使用hbuilder
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title></title>
</head>
<body>
<table id="myTable">
<tr>
<td>黄1</td>
</tr>
<tr>
<td>行2</td>
</tr>
<tr>
<td>行3</td>
</tr>
</table>
</body>
<button id="button" onclick="submit">点击我</button>
</html>
<script src="F:\Carry\1 1808\jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 获取表格的所有行
//var rows = $('#myTable tr');
//$(rows).append('<input type="checkbox" />');
$.ajax({
//url: 'your-api-url', // 替换为你的API接口URL
url:"date.json",
type: "get", // 或者使用POST，根据你的接口要求
success: function(response) {
console.log(response)
debugger
// var rows = $('#myTable tr');
var rows = $('#myTable tr:eq(0)');
var name = $('#myTable tr:eq(0) td').text();
$.each(response, function(index, item) {
// 假设每个数据项有一个"value"属性表示复选框的值
var checkbox = $('input[type="checkbox"][value="' + item.value + '"]'); // 选择对应的复选框
// $(rows).append('input[type="checkbox"][value="' + item.value + '"]'); // 选择对应的复选框
// $(rows).append('<input type="checkbox" id="option1" value="'+value1+'" /> <label for="option1">'+item+'</label>'); // 选择对应的复选框
$(rows).append('<input type="checkbox" id="'+item+'" value="'+item+'" checked="true" name="'+name+'"/> <label for="option1">'+item+'</label>'); // 选择对应的复选框
// var checkbox = $('input[type="checkbox"][value="' + item + '"]');
// $(rows).append(checkbox); // 选择对应的复选框
// checkbox.prop('checked', true); // 将复选框设置为选中状态
})
},
});
});
$("#button").click(function(){
debugger
// const ss = [];
var ss = [];
//$('input[type=checkbox]:checked').each(function(){
ss.push($(this.value));
// ss.push(this.value);
//});
//ss = $('input[name="黄1"]:checked').serializeArray();
$('input[name="黄1"]:checked').each(function(){
ss.push(this.value);
});
console.log(ss)
})
</script>
date.js
[
"1","2","3"
]
效果
两次输出结果
这辈子坚持与不坚持都不可怕，怕的是独自走在坚持的道路上。
增加了一下样式，其他不变
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title></title>
</head>
<form>
<body>
<table id="myTable">
<tr>
<td>黄1</td>
</tr>
<tr>
<td>行2</td>
</tr>
<tr>
<td>行3</td>
</tr>
</table>
</body>
</form>
<button id="button" onclick="submit">点击我</button>
</html>
<script src="F:\Carry\1 1808\jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 获取表格的所有行
//var rows = $('#myTable tr');
//$(rows).append('<input type="checkbox" />');
$.ajax({
//url: 'your-api-url', // 替换为你的API接口URL
url:"date.json",
type: "get", // 或者使用POST，根据你的接口要求
success: function(response) {
console.log(response)
debugger
// var rows = $('#myTable tr');
var rows = $('#myTable tr:eq(0)');
var name = $('#myTable tr:eq(0) td').text();
$.each(response, function(index, item) {
// 假设每个数据项有一个"value"属性表示复选框的值
var checkbox = $('input[type="checkbox"][value="' + item.value + '"]'); // 选择对应的复选框
// $(rows).append('input[type="checkbox"][value="' + item.value + '"]'); // 选择对应的复选框
// $(rows).append('<input type="checkbox" id="option1" value="'+value1+'" /> <label for="option1">'+item+'</label>'); // 选择对应的复选框
$(rows).append('<input type="checkbox" id="'+item+'" value="'+item+'" checked="true" name="'+name+'"/> <label for="option1">'+item+'</label>'); // 选择对应的复选框
// var checkbox = $('input[type="checkbox"][value="' + item + '"]');
// $(rows).append(checkbox); // 选择对应的复选框
// checkbox.prop('checked', true); // 将复选框设置为选中状态
})
},
});
var form = $('form');
// 应用样式
form.css({
// 'background-color': 'red',
// 'color': 'white' ,
'width':'300px',
'margin': '20px auto',
'margin-bottom': '10px',
'display': 'inline-block',
//width: 100px,
'text-align': 'right',
//'width': '200px',
'padding': '5px',
'background-color': '#4CAF50',
'color': 'white',
'padding': '10px 15px',
'border': 'none',
'cursor': 'pointer'
});
});
$("#button").click(function(){
debugger
// const ss = [];
var ss = [];
//$('input[type=checkbox]:checked').each(function(){
ss.push($(this.value));
// ss.push(this.value);
//});
//ss = $('input[name="黄1"]:checked').serializeArray();
$('input[name="黄1"]:checked').each(function(){
ss.push(this.value);
});
console.log(ss)
})
</script>
