#jquery #html #asp.net-mvc
#jquery #HTML #asp.net-mvc
Вопрос:
У меня есть этот код, который создает таблицу, в которой есть флажки, а у моих флажков нет идентификатора, я просто хочу, чтобы они указывали мне имя текущего пользователя в строке, когда они отмечены или сняты, и я пытаюсь сделать это с помощью функции OnChecked, и она не работает.
Это мой код:
<table id="table" class="table table-bordered table-responsive table-hover table-bordered">
<tr>
<th align="center">Nome</th>
<th align="center">Envia Mensagem</th>
<th align="center">Envia Emails</th>
<th align="center">Remover</th>
</tr>
@foreach (var esp in ViewBag.Json1)
{
<tr>
<td>@esp.Nome</td>
@if (@esp.NotificacaoEmail == "True")
{
<td align="center"><input class="minimal" onclick="FillBooks(CURRENT LINE NAME);" type="checkbox" checked="checked"></td>
}
else
{
<td align="center"><input class="minimal" type="checkbox"></td>
}
@if (@esp.NotificacaoAlerta == "True")
{
<td align="center"><input class="minimal" type="checkbox" checked="checked"></td>
}
else
{
<td align="center"><input class="minimal" type="checkbox"></td>
}
<td>
<button type="button" class="btn btn-block btn-danger">Remover</button>
</td>
</tr>
}
</table>
Это мой Javascript:
function myFunction(val) {
alert(val);
}
Я не получаю предупреждение, когда меняю флажок на true или false, и я не знаю почему, может кто-нибудь помочь мне с этим?
Ответ №1:
Вы можете применить прослушиватель onchange ко всем флажкам в таблице и выяснить, установлен ли он или снят, следующим образом:
$("#table").on("change", "input[type=checkbox]", function () {
if ($(this).is(":checked")) {
// This checkbox was just checked
} else {
// This checkbox was just unchecked
}
});
Рабочий фрагмент ниже:
$("#table").on("change", "input[type=checkbox]", function () {
var name = $(this).parents("tr").children().first().text();
if ($(this).is(":checked")) {
// This checkbox was just checked
alert(name " is checked");
} else {
// This checkbox was just unchecked
alert(name " is unchecked");
}
});
for (var i = 0; i < 5; i )
$("#table").append("<tr><td>Name " (i 1) "</td><td><input type="checkbox" /></td></tr>")
setTimeout(function () {
for (var i = 5; i < 10; i )
$("#table").append("<tr><td>Name " (i 1) "</td><td><input type="checkbox" /></td></tr>")
}, 5000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table"></table>
Комментарии:
1. кажется, это отличный способ сделать это, но он не запускается, я не знаю почему. Я сделал это так: $(document). готово(функция () { $(«#table2»).find(«ввод [тип= флажок]»).on(«изменить», функция () { if ($(this).is(«:проверено»)) { оповещение («проверено») } else { оповещение («снято») } }); }
2. Ваши входные данные или таблица добавляются на страницу динамически? Идентификатор таблицы, который вы используете, отличается от вашего первоначального сообщения там
3. входные данные моей таблицы добавляются динамически
4. Хорошо, я обновил ответ, чтобы он работал с динамическими входами
5. Не уверен, что вам все еще это нужно, но я добавил фрагмент в ответ, который содержит предупреждение при выборе каждого флажка
Ответ №2:
Получить флажок в jQuery как:
let checkboxes = $("input[type='checkbox']");
//you can debug after like
console.log(checkboxes);
итак, в Javascript у вас может быть флажок, подобный:
let checkboxes = document.querySelectorAll("input[type='checkbox']");
// to debug
console.log(checkboxes);
Я надеюсь, что это поможет вам