[英]check checkbox on populated dropdown value selection via javascript
我得到6場景我想要做的6個復選框:
<tr style="height: 21px;">
<td style="width: 25%; height: 21px;">COB</td>
<td style="width: 25%; height: 21px;"><input name="COB" type="checkbox" id="COB" value="1" <?php if($_GET['COB'] == '1'){ echo 'checked="checked"';}?>/> </td>
<td style="width: 25%; height: 21px;">SMT</td>
<td style="width: 25%; height: 21px;"> <input name="SMT" id="SMT" type="checkbox" value="1" <?php if($_GET['SMT'] == '1'){ echo 'checked="checked"';}?>/> </td>
</tr>
<tr style="height: 21px;">
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;">BGA</td>
<td style="width: 25%; height: 21px;"> <input name="BGA" id="BGA" type="checkbox" value="1" <?php if($_GET['BGA'] == '1'){ echo 'checked="checked"';}?>/> </td>
</tr>
<tr style="height: 21px;">
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"> TSOP Typ 1 </td>
<td style="width: 25%; height: 21px;"><input name="TSOP" id="TSOP" type="checkbox" value="1"<?php if($_GET['TSOP'] == '1'){ echo 'checked="checked"';}?> /></td>
</tr>
<tr style="height: 21px;">
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"> TSOP Typ 2</td>
<td style="width: 25%; height: 21px;"><input name="TSOP2" id="TSOP2" type="checkbox" value="2"<?php if($_GET['TSOP'] == '2'){ echo 'checked="checked"';}?> /> </td>
</tr>
<tr style="height: 21px;">
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"></td>
<td style="width: 25%; height: 21px;"> LGA</td>
<td style="width: 25%; height: 21px;"><input name="LGA" id="LGA" type="checkbox" value="1"<?php if($_GET['LGA'] == '1'){ echo 'checked="checked"';}?> /> </td>
</tr>
在這里PHP部分我如何填充下拉列表。
<td style="width: 14.2857%; height: 21px;"> <select id="FlashID" name="FlashID" onchange="FlashFunction()" size="1" >
<option disabled selected value> </option>;
<?php
foreach($connection->query($flash) as $m)
{
if($m['FlashID'] == $_GET['FlashID']){
$isSelected = 'selected="selected"';
}else{
$isSelected = '';
}
echo "<option data-COB='".$m['COB']."' data-SMT='".$m['SMT']."' data-BGA='".$m['BGA']."' data-TSOP='".$m['TSOP']."' data-LGA='".$m['LGA']."' value='" . $m['FlashID'] . "'".$isSelected." >" .$m['SAP'] ."</option>";
}
?>
</td>
這是彈出的Dropdown的SQL表
FlashID SAP COB SMT BGA TSOP LGA
1 102292 0 1 0 2 0
3 102293 0 1 0 2 0
4 102294 0 1 0 2 0
5 102296 0 1 0 0 1
6 102412 0 1 0 1 0
7 102413 0 1 0 1 0
8 102414 0 1 0 1 0
9 102651 0 1 0 2 0
10 102652 0 1 0 2 0
11 102664 0 1 0 2 0
這是我的工作Javascript部分:
<script>
function FlashFunction(){
var index = document.getElementById("FlashID").selectedIndex;
var COB = document.getElementById("FlashID").options[index].getAttribute("data-COB");
var SMT = document.getElementById("FlashID").options[index].getAttribute("data-SMT");
var BGA = document.getElementById("FlashID").options[index].getAttribute("data-BGA");
var TSOP = document.getElementById("FlashID").options[index].getAttribute("data-TSOP");
var LGA = document.getElementById("FlashID").options[index].getAttribute("data-LGA");
document.getElementsByName("COB")[0].value = COB;
document.getElementsByName("SMT")[0].value = SMT;
document.getElementsByName("BGA")[0].value = BGA;
document.getElementsByName("TSOP")[0].value = TSOP;
document.getElementsByName("TSOP2")[0].value = TSOP;
document.getElementsByName("LGA")[0].value = LGA;
}
</script>
請注意,TSOP可以是值1或2。
對於前 如果我選擇FlashID 6,您就會看到。應檢查TSOP和SMT復選框。
但是atm我不知道,我怎么能解決為什么我的Javascript無法正常工作有人可以幫忙嗎?
我注意到在最后3個復選框中,您沒有值和PHP代碼之間的空格。
這個:
<td style="width: 25%; height: 21px;"><input name="TSOP2" id="TSOP2" type="checkbox" value="2"<?php if($_GET['TSOP'] == '2'){ echo 'checked="checked"';}?> /> </td>
執行php后可以執行此操作:
<td style="width: 25%; height: 21px;"><input name="TSOP2" id="TSOP2" type="checkbox" value="2"checked="checked" /> </td>
應該是這樣的:
td style="width: 25%; height: 21px;"><input name="TSOP2" id="TSOP2" type="checkbox" value="2" checked="checked" /> </td>
根據DOM標准 ,elemnet ID在整個文檔中應該是唯一的。 在您的代碼中,兩個input
具有相同的ID TSOP
。
我已經創建了codepen 示例 ,以顯示JAVASCRIPT部分正在運行,您的PHP代碼可能存在一些問題。
function FlashFunction() { var index = document.getElementById("FlashID").selectedIndex; var SMT = document .getElementById("FlashID") .options[index].getAttribute("data-SMT"); var BGA = document .getElementById("FlashID") .options[index].getAttribute("data-BGA"); var TSOP = document .getElementById("FlashID") .options[index].getAttribute("data-TSOP"); var LGA = document .getElementById("FlashID") .options[index].getAttribute("data-LGA"); document.getElementsByName("COB")[0].value = COB; document.getElementsByName("SMT")[0].value = SMT; document.getElementsByName("BGA")[0].value = BGA; document.getElementsByName("TSOP")[0].value = TSOP; document.getElementsByName("TSOP2")[0].value = TSOP; document.getElementsByName("LGA")[0].value = LGA; if (TSOP == 1) { document.getElementsByName("TSOP")[0].checked = true; } }
<select id="FlashID" name="FlashID" onchange="FlashFunction()"> <option data-SMT="1" value="volvo">102292</option> <option data-SMT="1" value="saab">102293</option> <option data-SMT="1" data-TSOP="1" value="mercedes">102412</option> </select> <table> <tr style="height: 21px;"> <td style="width: 25%; height: 21px;">COB</td> <td style="width: 25%; height: 21px;"><input name="COB" type="checkbox" id="COB" value="1" /> </td> <td style="width: 25%; height: 21px;">SMT</td> <td style="width: 25%; height: 21px;"> <input name="SMT" id="SMT" type="checkbox" value="1" </td> </tr> <tr style="height: 21px;"> <td style="width: 25%; height: 21px;"></td> <td style="width: 25%; height: 21px;"></td> <td style="width: 25%; height: 21px;">BGA</td> <td style="width: 25%; height: 21px;"> <input name="BGA" id="BGA" type="checkbox" value="1" </td> </tr> <tr style="height: 21px;"> <td style="width: 25%; height: 21px;"></td> <td style="width: 25%; height: 21px;"></td> <td style="width: 25%; height: 21px;"> TSOP Typ 1 </td> <td style="width: 25%; height: 21px;"><input name="TSOP" id="TSOP" type="checkbox" value="1" </td> </tr> <tr style="height: 21px;"> <td style="width: 25%; height: 21px;"></td> <td style="width: 25%; height: 21px;"></td> <td style="width: 25%; height: 21px;"> TSOP Typ 2</td> <td style="width: 25%; height: 21px;"><input name="TSOP2" id="TSOP2" type="checkbox" value="2" </td> </tr> <tr style="height: 21px;"> <td style="width: 25%; height: 21px;"></td> <td style="width: 25%; height: 21px;"></td> <td style="width: 25%; height: 21px;"> LGA</td> <td style="width: 25%; height: 21px;"> <input name="LGA" id="LGA" type="checkbox" value="1" </td> </tr> </table>
你不要選中這樣的復選框
document.getElementsByName("COB")[0].value = COB;
document.getElementsByName("SMT")[0].value = SMT;
document.getElementsByName("BGA")[0].value = BGA;
document.getElementsByName("TSOP")[0].value = TSOP;
document.getElementsByName("TSOP2")[0].value = TSOP;
document.getElementsByName("LGA")[0].value = LGA;
正確的方法是這樣的:
document.getElementById("ItemId").checked = true;
// because there is one <input ...> i use getEmelentById instead of getElementsById
在你的程序中我認為這是你需要使用的正確的JavaScript:
<script>
function FlashFunction(){
var index = document.getElementById("FlashID").selectedIndex;
var COB = document.getElementById("FlashID").options[index].getAttribute("data-COB");
var SMT = document.getElementById("FlashID").options[index].getAttribute("data-SMT");
var BGA = document.getElementById("FlashID").options[index].getAttribute("data-BGA");
var TSOP = document.getElementById("FlashID").options[index].getAttribute("data-TSOP");
var LGA = document.getElementById("FlashID").options[index].getAttribute("data-LGA");
if (COB == 1 ) {
document.getElementById("COB").checked= true;
} else {
document.getElementById("COB").checked= false;
}
if (SMT == 1 ) {
document.getElementById("SMT").checked= true;
} else {
document.getElementById("SMT").checked= false;
}
if (BGA == 1 ) {
document.getElementById("BGA").checked= true;
} else {
document.getElementById("BGA").checked= false;
}
if (TSOP == 1 ) {
document.getElementById("TSOP").checked= true;
} else {
document.getElementById("TSOP").checked= false;
}
if (TSOP == 2 ) {
document.getElementById("TSOP2").checked= true;
} else {
document.getElementById("TSOP2").checked= false;
}
if (LGA == 1 ) {
document.getElementById("LGA").checked= true;
} else {
document.getElementById("LGA").checked= false;
}
}
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.