我正在创建一个接口，该接口将从2个不同的数据库中获取数据，将该数据提供给接口，并使用该接口确定将哪条信息存储到新数据库中。 （基本上创建一个合并数据库的系统，但用户可以选择将哪些数据传递给新数据库。）在此界面中还有一个文本框，以便用户可以输入数据，以防两个数据库都有不正确的数据。
目前我只使用2个数据库的一部分，并希望实现一种复选框系统，用户可以选中一个框来选择数据，如果他们想要另一个框，那么前一个复选框就会去假。
我找到了一种方法，但它会占用整个表格，一旦你用另一个表格行尝试它就会崩溃。我想尝试使JS独立于每个表行。有没有办法对每一行实施这样的机制？这是我目前的代码：（Ps.Mac以前是一个PHP文件）
HTML：
<html>
<head>
<script src="jquery-1.12.4.min.js"></script>
<script src="formAdd.js"></script>
<link rel="stylesheet" type="text/css" href="dbInfo.css">
<title>Database 1</title>
</head>
<body>
<form name="contactform" method="post" action="">
<table id="Forms" width="100%">
<col width="10%" >
<col width="30%" >
<col width="30%" >
<col width="30%" >
<tr>
<th style="background-color:#7FCCCC"> Fields </th>
<th style="background-color:#7FCCCC"> DB 1 </th>
<th style="background-color:#7FCCCC"> DB 2 </th>
<th style="background-color:#7FCCCC"> DB Nueva </th>
</tr>
<tr style="background-color:#CCCCCC">
<td style="font-weight:bold"> Fecha UTC </td>
<td> <input type="checkbox" name="FechaUTC1" onclick="CopyF(this.form)" value="September 14" align="right"> September 14 </td>
<td> <input type="checkbox" name="FechaUTC2" onclick="CopyF2(this.form)" value="November 17" align="right"> November 17 </td>
<td> <input type="text" name="FechaUTC3" size="60"> </td>
</tr>
</table>
<!-- <tr>
<td style="font-weight:bold"> Fecha Local </td>
<td> <input type="checkbox" name="FechaLoc1" onclick="CopyFLoc(this.form)" value="<?php echo $test ?>" align="right"> Septiembre 13, 2016 23:06:31 Hora Local </td>
<td> <input type="checkbox" name="FechaLoc2" onclick="CopyFLoc3(this.form)" value="<?php echo $test ?>" align="right"> Noviembre 14 2016 23:06:31 Hora Local </td>
<td> <input type="text" name="FechaLoc3" size="60"> </td>
</tr>
-->
</table>
<p>
<input type="submit" value="Submit">
</p>
</form>
</body>
</html>
JS：
function CopyF(f) {
if(f.FechaUTC1.checked == true) {
f.FechaUTC3.value = f.FechaUTC1.value;
if(f.FechaUTC2.checked == true)
f.FechaUTC2.checked = false;
}
}
function CopyF2(f) {
if(f.FechaUTC2.checked == true) {
f.FechaUTC3.value = f.FechaUTC2.value;
if(f.FechaUTC1.checked == true)
f.FechaUTC1.checked = false;
}
}
答案 0 :(得分：1)
对于问题的第一部分，我相信您最好使用单选按钮，因为它已经具有您尝试使用的功能类型（只能单击其中一个）。您可以非常轻松地添加第三个选项，其中包含＆＃34;其他＆＃34;因此，这将启用您可以写入的输入框。
确保它不会崩溃的最简单方法是确保每组无线电盒的行号是唯一的。
我在这里使用名为jQuery的库。它非常受欢迎，并具有许多内置功能。如果您之前从未使用过jQuery，我建议您前往CodeSchool并至少通过第一部分来熟悉我所写的内容。
$(function() {
// this way of calling the dollar sign ($) function is a shorthand for $(document).ready();
$('input.fecha-unico').on('click', function() {
//I am adding an event to all inputs with the class 'fecha-unico'
var $this = $(this); //the this object is itself just the HTMLElement object from your browser. Here I am wrapping it in the jquery functions to allow myself access to the functions jquery has.
var $input = $this.closest('tr').find('input:text');
//I am finding the closest TR to this radio element, and then searching ('finding') a textbox child.
if ($this.val() == '-1') {
//If this checkbox's value is -1, it means we are using the 'other' checkbox, and need to enable the text input.
$input.prop('disabled', false);
} else {
//Otherwise, we need to make sure the writing thing is disabled (say you clicked the other box but then realized you wanted the first checkbox instead).
if (!$input.prop('disabled')) {
$input.prop('disabled', true)
}
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="contactform" method="post" action="">
<table id="Forms" width="100%">
<col width="10%">
<col width="30%">
<col width="30%">
<col width="30%">
<tr>
<th style="background-color:#7FCCCC">Fields</th>
<th style="background-color:#7FCCCC">DB 1</th>
<th style="background-color:#7FCCCC">DB 2</th>
<th style="background-color:#7FCCCC" colspan="2">DB Nueva</th>
</tr>
<tr style="background-color:#CCCCCC">
<td style="font-weight:bold">Fecha UTC</td>
<td>
<input class="fecha-unico" type="radio" name="FechaUTC1" value="September 14" align="right">September 14</td>
<td>
<input class="fecha-unico" type="radio" name="FechaUTC1" value="November 17" align="right">November 17</td>
<td>
<label>Other:
<input type="radio" class="fecha-unico" name="FechaUTC1" value="-1" />
</label>
</td>
<td>
<input type="text" name="FechaUTC3" size="60" disabled>
</td>
</tr>
<tr style="background-color:#CCCCCC">
<td style="font-weight:bold">Fecha UTC</td>
<td>
<input class="fecha-unico" type="radio" name="FechaUTC2" value="September 14" align="right">September 14</td>
<td>
<input class="fecha-unico" type="radio" name="FechaUTC2" value="November 17" align="right">November 17</td>
<td>
<label>Other:
<input type="radio" class="fecha-unico" name="FechaUTC2" value="-1" />
</label>
</td>
<td>
<input type="text" name="FechaUTC3" size="60" disabled>
</td>
</tr>
</table>
<!-- <tr>
<td style="font-weight:bold"> Fecha Local </td>
<td> <input type="checkbox" name="FechaLoc1" onclick="CopyFLoc(this.form)" value="<?php echo $test ?>" align="right"> Septiembre 13, 2016 23:06:31 Hora Local </td>
<td> <input type="checkbox" name="FechaLoc2" onclick="CopyFLoc3(this.form)" value="<?php echo $test ?>" align="right"> Noviembre 14 2016 23:06:31 Hora Local </td>
<td> <input type="text" name="FechaLoc3" size="60"> </td>
</tr>
-->
<p>
<input type="submit" value="Submit">
</p>
</form>