问题描述
我的 js 代码有问题,当我检查我的 onClick() 操作框时,他们会检查所有这些框,但在部分网络中的检查元素中,我没有看到有什么事情发生。
<table class="table table-striped grid-table" id="tableLabel">
<tr>
<th>Name</th>
<th>Book</th>
<th>
<button type="button" class="checkall" onClick="checkAll()">select/deselect</button>
</th>
</tr>
@foreach (var item in (IEnumerable<cit.Models.getCheIdTip_Result>)Model)
{
<tr>
<td>@item.idtip</td>
<td>@item.tipname</td>
<td>
<div class="pure-checkBox">
<input type="checkBox" idtip="@item.idtip" class="checktip" checked="@(item.idemployee == ViewBag.idemployee ? true : false)" name="@item.id.ToString()" id="@item.id.ToString()" />
<label for="@item.id.ToString()"></label>
</div>
</td>
</tr>
}
</table>
<input type="hidden" value="@ViewData["idemployee"]" name="idemployee" id="idemployee" class="idemployee" />
这是我的js代码,如何选择所有它们并传递给控制器。
var isChecked = false;
function checkAll() {
var checkBoxes = document.getElementsByTagName('input');
if (isChecked) {
for (var i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i].className == 'checktip') {
checkBoxes[i].checked = true;
}
}
} else {
for (var i = 0; i < checkBoxes.length; i++) {
console.log(i)
if (checkBoxes[i].className == 'checktip') {
checkBoxes[i].checked = false;
}
}
}
isChecked = !isChecked;
}
解决方法
你只是在那里使用了标签,这让你不能只点击复选框。你必须有一个 js 或 jquery 来确保你检查了什么,甚至做了什么。我将展示我的例子。我有同样的问题。我使用了自定义复选框,无法将其发送到后端
<label class="custom-chk">
<input type="checkbox">
<span class="checkmark"></span>
</label>
$('.checkmark').click(function () {
$(this).parents('td').toggleClass('chked')
})
我使用 ajax 发送数组。从选中的框中创建一个数组并使用 ajax 将其发送到后端。
for (var i = 0; i < $('label').length; i++) {
if ($('label').eq(i).hasClass('chked')) {
qrfid.push(
$('label').eq(i).attr('value')
)
}
}
不要完成括号并使用 $.post 或 $.ajax(只需单击您要提交的按钮)
你还没有写下你将如何发送数据。所以我建议和我一样。这取决于你
, @foreach (var item in (IEnumerable<cit.Models.getCheIdTip_Result>)Model)
{
<tr>
<td>@item.idtip</td>
<td>@item.tipname</td>
<td>
<div class="pure-checkbox" idtip="@item.idtip">
<input type="checkbox" class="checktip" id="@item.id.ToString()" />
<label for="@item.id.ToString()"></label>
</div>
</td>
</tr>
}
<script>
$('.pure-checkbox').click(function () {
$(this).parents('td').toggleClass('chked')
})
var wantedids = []
$("#yoursubmitbutton").click(function () {
for (var i = 0; i < $('.pure-checkbox').length; i++) {
if ($('.pure-checkbox').eq(i).parents('td').hasClass('chked')) {
wantedids.push(
$('.pure-checkbox').eq(i).attr('idtip')
)
}
}
$.post("your url",{ nameofC#variable: wantedids,nameofC#variable : $('#idofelement') },)
})
</script>
idk 如果你的 div 有 chkd 类,它可能会破坏你的代码。所以我将它添加到 td 标签。但是 div 也是可以的。您将使用 ajax 发送所有内容。并且您不需要表单标签,标签中的名称属性。
而且我还看到您试图说如果以下条件为真,请选中该框。但你可以使用 @如果
@foreach (var fenn in ViewBag.Fenn.Rows)
{
bool p = true;
<span>@fenn["FennAd"]</span>
foreach (var kfenn in ViewBag.QrFennInfo.Rows)
{
if (kfenn["FennID"] == fenn["FennID"])
{
<label value="@fenn["FennID"]" class="custom-chk chked">
<input type="checkbox" checked="">
<span class="checkmark"></span>
</label>
<div hidden>@(p = false)</div>
}
}
if (p)
{
<label value="@fenn["FennID"]" class="custom-chk">
<input type="checkbox">
<span class="checkmark"></span>
</label>
}
}
我的就是这样。我在这里没有用过英语。我只是使用 viewbag 并要求它使用 double for 和 1 if 来检查已检查的 sql 数据表。我的意思是我有一张课桌和一张小组桌。以及他们的组合表。