当我单击按钮时,会使用文本框和单选按钮创建新行。但是,在单击一行中的单选按钮时,将取消选择其他行的其他单选按钮。
但是即使单击其他单选按钮,我也想保持单选按钮处于选中状态。
这是我的代码:
<html>
<head>
<title>Add More Elements</title>
<script src="../practice/jquery.min.js"></script>
<script>
$(document).ready (function () {
$('.btnAdd').click (function () {
$('.buttons').append('<div><input type="text" name="txt">M<input type="radio" id="m" name="gender">F<input type="radio" id="f" name="gender"><input type="checkbox" name="txt"><br></div>'); // end append
}); // end click
}); // end ready
</script>
</head>
<body>
<p>This Is Create Textboxs Dinamically </p>
<div class="buttons">
<table><tr><td>Name:</td><td>Gender:</td><td>Choice:</td><td><input type="button" class="btnAdd" value="Click Me To Create TextBox"><br></td></tr>
<tr> <td><input type="text" name="txt"></td><td>M<input type="radio" id="m" name="gender">F<input type="radio" id="f" name="gender"></td><td><input type="checkbox" name="txt"></td><td></td> </tr>
</table>
</div>
</body>
</html>
如果单击同一单选按钮时无法取消选择,则不妨使用复选框。
如果单选按钮具有相同的名称,它们将相互取消选择。尝试为每组单选按钮分配不同的名称
M<input type="radio" id="m" name="gender[0]">
F<input type="radio" id="f" name="gender[0]">
M<input type="radio" id="m" name="gender[1]">
F<input type="radio" id="f" name="gender[1]">
您的收音机都是同名的。
您可以通过添加索引键将它们成对分组
<input type='radio' name='grouping[1]' />
<input type='radio' name='grouping[1]' />
<input type='radio' name='grouping[2]' />
<input type='radio' name='grouping[2]' />
你给单选按钮起了相同的名字,虽然它们的ID是唯一的,但它们具有相同的名称,所以要么使用不同的名称,要么使用复选框
您将附加单
选按钮和具有相同名称和 ID 的输入文本id="m"
。在页面中,控件不能具有相同的 ID。尝试为它们分配不同的 2 个 ID。
var count=0;
$(document).ready (function () {
$('.btnAdd').click (function () {
count++;
$('.buttons').append('<div><input type="text" name="txt">M<input type="radio" id="m"+count+" name="gender">F<input type="radio" id="f" name="gender"><input type="checkbox" name="txt"><br></div>'); // end append
}); // end click
}); // end ready
在 ID 中使用计数。
所有单选按钮都具有相同的名称属性,它们都属于同一组。 您必须通过给每个组一个唯一的 ID 来使每个组唯一,例如通过运行数字标识行本身......
.HTML:
</head>
<body>
<p>This Is Create Textboxs Dinamically </p>
<div class="buttons">
<table><tr><td>Name:</td><td>Gender:</td><td>Choice:</td><td><input type="button" class="btnAdd" value="Click Me To Create TextBox"><br></td></tr>
<tr> <td><input type="text" name="txt"></td><td>M<input type="radio" id="m" name="gender">F<input type="radio" id="f" name="gender"></td><td><input type="checkbox" name="txt"></td><td></td> </tr>
</table>
</div>
</body>
.JS:
$(document).ready(function () {
var rowCount = 0;
$('.btnAdd').click(function () {
$('.buttons').append('<div id="row"' + rowCount + '><input type="text" name="txt">M<input type="radio" id="m" name="genderForRow"' + rowCount + '>F<input type="radio" id="f" name="genderForRow"' + rowCount + '><input type="checkbox" name="txt"><br></div>'); // end append
rowCount++;
}); // end click
}); // end ready
在这里看到小提琴链接...