我正在创建一个接口，它将从2个不同的数据库中获取数据，将该数据提供给接口，并使用该接口确定将哪些信息存储到新数据库中。(基本上是创建一个系统来合并数据库，但用户可以选择将哪些数据传递到新数据库。)在这个界面中还会有一个文本框，以便在两个数据库都有不正确的数据的情况下，用户可以输入数据。
目前，我正在与2数据库的一部分工作，并希望实现一种类型的复选框系统，其中用户将选中一个框来选择数据，如果他们想要另一个前一个复选框将去假。
我找到了一种方法来做到这一点，但它会采取整个形式，一旦你尝试它与另一个表行，它会崩溃。我想尝试使JS独立于每个表行。是否有一种方法来实现这样的机制，每一行?这是我当前的代码:(Ps. HTML曾经是一个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;
}
}
对于你问题的第一部分，我相信你最好使用单选按钮，因为它已经具有你试图使用的功能类型(其中只有一个可以点击)。你可以很容易地添加第三个选项"other"，这样就可以启用你可以写入的输入框。
确保它不会崩溃的最简单方法是确保每组单选框的行号是唯一的。
我在这里使用一个叫做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>