当我在 table 中单击特定的 td 时,我想在 "checked" 上设置我的复选框
I want to set my checkbox on "checked" when i click a specific td in my table
嘿伙计们。
单击一行的最后一个 td 字段后,我希望我的复选框为 "checked"。
我用 JQuery 尝试过,但不幸的是我总是选中所有复选框。
我只想检查我点击的行的 td。
这就是我构建 table 的方式。
<table class="table table-striped" id="notfallTable">
<tr>
<th value="name">Name</th>
<th>Nachname</th>
<th>Nummer</th>
<th>Abteilung</th>
<th id="thCheckbox"><button id="checkAll" class="btn btn-success">Check all</button>
</th>
</tr>
</table>
$.getJSON("NotfallSMS.json", function(data){
var items=[];
var checkbox="test";
$.each(data, function(key, val){
items.push("<tr>");
items.push("<td contenteditable>"+val.Name+"</td>");
items.push("<td contenteditable>"+val.Nachname+"</td>");
items.push("<td contenteditable>"+val.Nummer+"</td>");
items.push("<td contenteditable>"+val.Abteilung+"</td>")
items.push("<td class='check'><input class='check' type='checkbox'>"+""+"</input></td>");
items.push("</tr>");
});
$("<tbody/>", {html: items.join("")}).appendTo("table");
});
希望你能帮帮我。
问候
精灵
为此,您可以将点击事件处理程序挂接到 td.check
元素,该元素使用 find()
检索单元格中的复选框并切换其 checked
属性 ,像这样:
$('tr td.check').on('click', function() {
$(this).find(':checkbox').prop('checked', (i, checked) => !checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="notfallTable">
<tr>
<th value="name">Name</th>
<th>Nachname</th>
<th>Nummer</th>
<th>Abteilung</th>
<th id="thCheckbox"><button id="checkAll" class="btn btn-success">Check all</button>
</th>
</tr>
<tbody>
<tr>
<td contenteditable>val.Name</td>
<td contenteditable>val.Nachname</td>
<td contenteditable>val.Nummer</td>
<td contenteditable>val.Abteilung</td>
<td class="check"><input class="check" type="checkbox" /></td>
</tr>
<tr>
<td contenteditable>val.Name</td>
<td contenteditable>val.Nachname</td>
<td contenteditable>val.Nummer</td>
<td contenteditable>val.Abteilung</td>
<td class="check"><input class="check" type="checkbox" /></td>
</tr>
</tbody>
</table>
但是值得注意的是,您可以在没有 JS 或 jQuery 的情况下通过使用 CSS 来实现完全相同的行为。将复选框包裹在 label
中并使用 CSS 将其设置为 display: block
:
label {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="notfallTable">
<tr>
<th value="name">Name</th>
<th>Nachname</th>
<th>Nummer</th>
<th>Abteilung</th>
<th id="thCheckbox"><button id="checkAll" class="btn btn-success">Check all</button>
</th>
</tr>
<tbody>
<tr>
<td contenteditable>val.Name</td>
<td contenteditable>val.Nachname</td>
<td contenteditable>val.Nummer</td>
<td contenteditable>val.Abteilung</td>
<td class="check"><label><input class="check" type="checkbox" /></label></td>
</tr>
<tr>
<td contenteditable>val.Name</td>
<td contenteditable>val.Nachname</td>
<td contenteditable>val.Nummer</td>
<td contenteditable>val.Abteilung</td>
<td class="check"><label><input class="check" type="checkbox" /></label></td>
</tr>
</tbody>
</table>
$('.check').on('click', function() {
$($(this).find('input')[0]).prop('checked', true);
}
并从输入
中删除检查class
嘿伙计们。 单击一行的最后一个 td 字段后,我希望我的复选框为 "checked"。 我用 JQuery 尝试过,但不幸的是我总是选中所有复选框。 我只想检查我点击的行的 td。
这就是我构建 table 的方式。
<table class="table table-striped" id="notfallTable">
<tr>
<th value="name">Name</th>
<th>Nachname</th>
<th>Nummer</th>
<th>Abteilung</th>
<th id="thCheckbox"><button id="checkAll" class="btn btn-success">Check all</button>
</th>
</tr>
</table>
$.getJSON("NotfallSMS.json", function(data){
var items=[];
var checkbox="test";
$.each(data, function(key, val){
items.push("<tr>");
items.push("<td contenteditable>"+val.Name+"</td>");
items.push("<td contenteditable>"+val.Nachname+"</td>");
items.push("<td contenteditable>"+val.Nummer+"</td>");
items.push("<td contenteditable>"+val.Abteilung+"</td>")
items.push("<td class='check'><input class='check' type='checkbox'>"+""+"</input></td>");
items.push("</tr>");
});
$("<tbody/>", {html: items.join("")}).appendTo("table");
});
希望你能帮帮我。 问候 精灵
为此,您可以将点击事件处理程序挂接到 td.check
元素,该元素使用 find()
检索单元格中的复选框并切换其 checked
属性 ,像这样:
$('tr td.check').on('click', function() {
$(this).find(':checkbox').prop('checked', (i, checked) => !checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="notfallTable">
<tr>
<th value="name">Name</th>
<th>Nachname</th>
<th>Nummer</th>
<th>Abteilung</th>
<th id="thCheckbox"><button id="checkAll" class="btn btn-success">Check all</button>
</th>
</tr>
<tbody>
<tr>
<td contenteditable>val.Name</td>
<td contenteditable>val.Nachname</td>
<td contenteditable>val.Nummer</td>
<td contenteditable>val.Abteilung</td>
<td class="check"><input class="check" type="checkbox" /></td>
</tr>
<tr>
<td contenteditable>val.Name</td>
<td contenteditable>val.Nachname</td>
<td contenteditable>val.Nummer</td>
<td contenteditable>val.Abteilung</td>
<td class="check"><input class="check" type="checkbox" /></td>
</tr>
</tbody>
</table>
但是值得注意的是,您可以在没有 JS 或 jQuery 的情况下通过使用 CSS 来实现完全相同的行为。将复选框包裹在 label
中并使用 CSS 将其设置为 display: block
:
label {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="notfallTable">
<tr>
<th value="name">Name</th>
<th>Nachname</th>
<th>Nummer</th>
<th>Abteilung</th>
<th id="thCheckbox"><button id="checkAll" class="btn btn-success">Check all</button>
</th>
</tr>
<tbody>
<tr>
<td contenteditable>val.Name</td>
<td contenteditable>val.Nachname</td>
<td contenteditable>val.Nummer</td>
<td contenteditable>val.Abteilung</td>
<td class="check"><label><input class="check" type="checkbox" /></label></td>
</tr>
<tr>
<td contenteditable>val.Name</td>
<td contenteditable>val.Nachname</td>
<td contenteditable>val.Nummer</td>
<td contenteditable>val.Abteilung</td>
<td class="check"><label><input class="check" type="checkbox" /></label></td>
</tr>
</tbody>
</table>
$('.check').on('click', function() {
$($(this).find('input')[0]).prop('checked', true);
}
并从输入
中删除检查class