gpt4 book ai didi

javascript - Jquery:按每个表行检查 radio 不工作

转载 作者:行者123 更新时间:2023-11-28 12:17:13 26 4
gpt4 key购买 nike

我想循环表格的每一行并检查 radio ,如果默认情况下未检查,我们将检查它的 value=Local ,如果默认情况下已检查,则保留它。

我的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$( document ).ready(function() {
$('.tableA tr').each(function (index) {
//processing this row
//how to process each cell(table td) where there is checkbox
var countChecked = 0;
console.log("Row: "+index);
if(!$(this).find('input[type="radio"]').is(":checked")){
console.log("None Checked");
countChecked = 1;
} else {
var radioValue = $(this).find('input[type="radio"]:checked').val();
console.log("This row has checked: "+radioValue);
}

if (countChecked>0){
$(this).find(':radio[name=radioName][value=Local]').attr('checked', true);
}
});
});
</script>
</head>
<body>
<table class="tableA" border='1'>
<tr>
<td>
<input type="radio" name="radioName" class="myRadio" value="1" /> 1 <br />
<input type="radio" name="radioName" class="myRadio" value="2" /> 2 <br />
<input type="radio" name="radioName" class="myRadio" value="3" /> 3 <br />
<input type="radio" name="radioName" class="myRadio" value="Local" /> Local <br />
</td>
</tr>
<tr>
<td>
<input type="radio" name="radioName" class="myRadio" value="1" /> 1 <br />
<input type="radio" name="radioName" class="myRadio" value="2" checked /> 2 <br />
<input type="radio" name="radioName" class="myRadio" value="3" /> 3 <br />
<input type="radio" name="radioName" class="myRadio" value="Local" /> Local <br />
</td>
</tr>
<tr>
<td>
<input type="radio" name="radioName" class="myRadio" value="1" /> 1 <br />
<input type="radio" name="radioName" class="myRadio" value="2" /> 2 <br />
<input type="radio" name="radioName" class="myRadio" value="3" /> 3 <br />
<input type="radio" name="radioName" class="myRadio" value="Local" /> Local <br />
</td>
</tr>
</table>


</body>
</html>

Jsbin Link

这不起作用,但如果我注释掉该行:

$(this).find(':radio[name=radioName][value=Local]').attr('checked', true); 

控制台将正确显示。有什么想法吗?

最佳答案

真正的问题是所有 radio 项目都具有相同的名称,因此它们实际上是一个大 radio 组。这意味着 12 个中只能选择一个。

确保 3 个组中的每一个都有唯一的名称,然后从选择器过滤器中删除 name=radioName

https://jsfiddle.net/sehmxwwn/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$( document ).ready(function() {
$('.tableA tr').each(function (index) {
//processing this row
//how to process each cell(table td) where there is checkbox
var countChecked = 0;
console.log("Row: "+index);
if(!$(this).find('input[type="radio"]').is(":checked")){
console.log("None Checked");
countChecked = 1;
} else {
var radioValue = $(this).find('input[type="radio"]:checked').val();
console.log("This row has checked: "+radioValue);
}

if (countChecked>0){
$(this).find(':radio[value=Local]').attr('checked', true);
}
});
});
</script>
</head>
<body>
<table class="tableA" border='1'>
<tr>
<td>
<input type="radio" name="radioName" class="myRadio" value="1" /> 1 <br />
<input type="radio" name="radioName" class="myRadio" value="2" /> 2 <br />
<input type="radio" name="radioName" class="myRadio" value="3" /> 3 <br />
<input type="radio" name="radioName" class="myRadio" value="Local" /> Local <br />
</td>
</tr>
<tr>
<td>
<input type="radio" name="radioName1" class="myRadio" value="1" /> 1 <br />
<input type="radio" name="radioName1" class="myRadio" value="2" checked /> 2 <br />
<input type="radio" name="radioName1" class="myRadio" value="3" /> 3 <br />
<input type="radio" name="radioName1" class="myRadio" value="Local" /> Local <br />
</td>
</tr>
<tr>
<td>
<input type="radio" name="radioName2" class="myRadio" value="1" /> 1 <br />
<input type="radio" name="radioName2" class="myRadio" value="2" /> 2 <br />
<input type="radio" name="radioName2" class="myRadio" value="3" /> 3 <br />
<input type="radio" name="radioName2" class="myRadio" value="Local" /> Local <br />
</td>
</tr>
</table>


</body>
</html>

关于javascript - Jquery:按每个表行检查 radio 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46681257/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com