如何在选择复选框时使用javascript选择一排单选按钮
我需要做的是检查复选框是否被选中,如果是,选择位于同一元素内的所有单选按钮?如何在选择复选框时使用javascript选择一排单选按钮
我已经设置了id为id的元素,b/c是将会相互影响的元素的“物理”分组。
我试图做这样的事情的onchange(“some_row_id”):
function select_row(row_id) {
// Get 1st td element (where checkbox is located) and assign its
// checked value to variable "checked"
var checked = document.getElementById(row_id).td[0].input.checked;
if(checked) {
var children = document.getElementById(row_id).childNodes;
for(var i = 0; i< children.length; i++) {
if(children.td.type == radio) {
children.td.radio = checked;
}
}
}
}
我知道的JavaScript几乎是200%错误的,但我无法弄清楚如何正确地只选择TD孩子(或者优秀的,只有输入孙辈)的tr元素并检查它们。
下面是实际工作的HTML的基本形态结构:
<form name="form2" action="testfile4.php" method="get">
<table border="1"><thead>
<tr><th>Select entire row</th><th>item_code</th><th>description</th><th>page</th>
</tr>
</thead>
<tbody>
<tr id="534">
<td ><input type="checkbox" onchange="select_row(534);"></td> <td>15038 <input type="radio" name="15819-038|item_code" value="534" /></td>
<td>For 1st item, alternate 1
<input type="radio" name="15819-038|description" value="534" /></td>
<td>5
<input type="radio" name="15819-038|page" value="534" /></td>
</tr>
<tr id="535">
<td ><input type="checkbox" onchange="select_row(535);"></td> <td>15038 <input type="radio" name="15819-038|item_code" value="535" /></td>
<td>For 1st item, alternate 2 <input type="radio" name="15819-038|description" value="535" /></td>
<td>5
<input type="radio" name="15819-038|page" value="535" /></td>
</tr>
</tbody>
</table>
</form>
编辑: 我愿意接受jQuery的解决方案。谢谢。编辑2: 感谢nnnnnn。我用你的JS,并添加这个有我想要的不检查行为。如果你愿意,你可以用它更新你的答案,我会从这里将其删除:
else if (!row.cells[0].childNodes[0].checked) {
inputs = row.getElementsByTagName("input");
for(var i=0; i<inputs.length; i++) {
if(inputs[i].type === "radio") {
inputs[i].checked = false;
}
}
}
那么这里是做到这一点的一种方法:
function select_row(row_id) {
// get a reference to the row based on the id passed in
var row = document.getElementById(row_id),
inputs;
// .cells[0] gives the row's first td element,
// then .childNodes[0] gives that td's first child element which
// will be the checkbox
if (row.cells[0].childNodes[0].checked) {
// getElementsByTagName gives all descendent elements with the matching
// tag, not just direct children, so get all the inputs for the current
// row and loop through them looking for the radios
inputs = row.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
if (inputs[i].type==="radio")
inputs[i].checked = true;
}
}
}
,改变你的复选框,以onclick=...
instea d的onchange=...
。
请注意,使用复选框选择一行并没有什么意义,因为在选择一行后,如果您单击另一行的复选框,第一行的复选框仍会被选中。为了达到这个目的,你最好用一个按钮或者一个元件。
还要注意,而不是将行ID的功能,然后使用该ID获取到该行的引用,像这样的:
<input type="checkbox" onclick="select_row(534)">
function select_row(row_id) {
var row = document.getElementById(row_id);
// etc
您可以直接传递给被点击的复选框参考并用它来代替:
<input type="checkbox" onclick="select_row(this);">
function select_row(cb) {
var row = cb.parentNode.parentNode;
if (cb.checked) {
// etc
然而,在我的完整的解决方案上面我还是坚持了传递ID像你这样的情况下,您所呼叫的不仅仅是点击事件之外的其他地方的功能。
有几件事情你的代码错误张贴:
你不能只是指的它们的类型,例如获取特定元素的儿童,
getElementById(row_id).td[0].input
不起作用。要得到第一个td,你可以使用一行cells
集合,并说.cells[0]
(就像在我的代码中)。您的循环不使用循环内的
i
变量来选择单个项目。你应该已经说过了内环路children[i]
。你的if语句:
if(children.td.type = radio) {
是做一个赋值(单等号),而不是比较(双==或三===等号),并应比较字符串"radio"
(带引号)。
也许我应该只是“检查所有”和“取消所有”上用onclick属性链接。 –
谢谢,NNNNNN,这个出色的作品。现在我需要找出复选框问题的解决方案。我会为此提出另一个问题。 –
以及在我更新的答案我建议一个按钮或超链接,而不是一个复选框。是否有意义的用户在同一时间作为第二行的第3列收音机选择第一行的第2列收音机吗?什么将“全部取消”呢? – nnnnnn
如果你想jQuery的解决方案,然后在这里它是:
$(document).ready(function() {
$("#your_checkbpx_id").click(function() {
if($(this).is(":checked")) {
//select all your radio
var id = $(this).attr("id");
$("tr[id='"+id+"'] > input[type='radio']").each(function() {
//make it checked
$(this).attr("checked", "checked");
});
}
});
});
希望它可以帮助
这里有一个办法:
<script type="text/javascript">
/*
Loops through all input elements finding all checkboxs.
Testing if the current checkbox obj is equal to the selected checkbox object.
If equal: Set the radio button to the current state of the checkbox.
Not equal: Set its children radio buttons checked property false
--------------------------------------------------------------------------- */
function setCheckboxs(checkBox) {
var parent, i;
var checkBoxs = document.getElementsByTagName("input");
for (i = 0; i < checkBoxs.length; i++) {
if (checkBoxs[i].getAttribute("type") === "checkbox") {
parent = checkBoxs[i].parentNode.parentNode;
if (checkBox === checkBoxs[i]) {
toggleRadios(parent.childNodes, checkBoxs[i].checked);
} else {
checkBoxs[i].checked = false;
toggleRadios(parent.childNodes, false);
}
}
}
}
/*
Loops through all its children nodes finding a node's attribute equal to radio
----------------------------------------------------------------------------------- */
function toggleRadios(radios, isChecked) {
var i;
for (i = 0; i < radios.length; i++) {
if (radios[i].childNodes.length > 0) {
toggleRadios(radios[i].childNodes, isChecked);
}
if (radios[i].nodeName === "INPUT") {
if (radios[i].getAttribute("type") === "radio") {
radios[i].checked = isChecked;
}
}
}
}
</script>
<table border="1">
<thead>
<tr>
<th>
Select entire row
</th>
<th>
item_code
</th>
<th>
page
</th>
<th>
usd_dn
</th>
</tr>
</thead>
<tbody>
<tr id="534" class="15838">
<td>
<input type="checkbox" onclick="setCheckboxs(this);" />
</td>
<td>
15838<input type="radio" name="15838|item_code" value="534" />
</td>
<td>
284<input type="radio" name="15838|page" value="534" />
</td>
<td>
$73.00<input type="radio" name="15838|usd_dn" value="534" />
</td>
</tr>
<tr id="535" class="15838">
<td>
<input type="checkbox" onclick="setCheckboxs(this);" />
</td>
<td>
15838
<input type="radio" name="15838|item_code" value="535" />
</td>
<td>
299
<input type="radio" name="15838|page" value="535" />
</td>
<td>
$73.00<input type="radio" name="15838|usd_dn" value="535" />
</td>
</tr>
<tr id="565">
<td>
<input type="checkbox" onclick="setCheckboxs(this);" />
</td>
<td>
1611
<input type="radio" name="1611|item_code" value="565" />
</td>
<td>
66<input type="radio" name="1611|page" value="565" />
</td>
<td>
$3,350.00
<input type="radio" name="1611|usd_dn" value="565" />
</td>
</tr>
<tr id="566">
<td>
<input type="checkbox" onclick="setCheckboxs(this);" />
</td>
<td>
1611
<input type="radio" name="1611|item_code" value="566" />
</td>
<td>
66<input type="radio" name="1611|page" value="566" />
</td>
<td>
$3,225.00
<input type="radio" name="1611|usd_dn" value="566" />
</td>
</tr>
</tbody>
</table>
这是使用jQuery的方式更简单。只是在说'。 –
我很好用jQuery。让我知道你是否有办法做到这一点。谢谢。 –