通过javascript选中填充下拉值选择的复选框

Question

我在 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>

Answer 1

我注意到在最后 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>

Answer 2

根据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>

Answer 3

你不检查这样的复选框

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>