尝试在单选按钮上显示div单击

itsjustcarlos 发表于 Dev

它的正义

我希望在单击单选按钮时获得一些隐藏/显示div的帮助。

我有的JS是

function showOptions(id)
{
  document.getElementById(id).style.display="block"; 
}

我有一个php脚本，可使用7-10个是/否问题创建表单。当我选择“否”时，我希望div显示其他选项（复选框）

<li>Lorem Ispum?    <br>    
  <input type="radio" name="3" value="yes" onchange="hideOptions(100003)">Yes          
  <input type="radio" name="3" value="no" onchange="showOptions(100003)">No
  <div id="100003" style="border-color: blue; border-style: solid; margin: 2px; display:none">
    <input type="checkbox" name="10004">Bacon ipsum dolor amet filet mignon turkey pork chop rump swine, shank tail beef ribs capicola salami ball tip drumstick pastrami ribeye. Andouille tail bacon ball tip brisket
  </div>
</li>

不幸的是，它似乎无法正常工作，我无法弄清楚是什么导致了问题。

这是构建此代码的PHP部分：

if($row['question_form_type']=='boolean') {
  echo "<br><input type = 'radio' name = ".$row['question_id']." value = 'yes' onChange = 'hideOptions($option_id)'>Yes ";
  $option_id =$row['question_id']+100000;
  echo "<input type = 'radio'  name  = ".$row['question_id']." value = 'no' onChange = 'showOptions($option_id)'>No
        <div id = $option_id style = 'border-color: blue; border-style: solid; margin: 2px; display:dnone'>";
  $optionSQL = "select option_id, option_suggestion from sandbox_feedback_options where question_id = ".$row['question_id']." and option_type like  '%".$type_array[$x]."%'";
  $oresult = $conn->query($optionSQL);
  if ($oresult->num_rows > 0) {
    while($orow = $oresult->fetch_assoc()) {
      $od = $orow['option_id']+10000;
      echo "<input type = 'checkbox' name = $od>".$orow['option_suggestion']."</input><p>";
  }
  echo "</div>";
}

感谢您的任何帮助，您可以提供。

-IJC

这是完整的PHP脚本：

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript">
      function showDiv(id)

      {

                html = document.getElementById(id).innerHTML;
      document.getElementById('question').innerHTML = html;
                 }

    function showOptions(o_id) {
        document.getElementById(o_id).style.display = "block";
   alert (o_id);
         }

</script>

    </script>

    </head>
    <body>
<form action = 'email_feedback.php'>
<?php
include ("../config/dbConnector.php");
include ("../config/curlWrap.php");
echo '<label>Ticket Id</label>
<input type = "text" name = "ticket_id">
<label>Reviewer</label>
<input type = "text" name = "reviewer">';
$getQSQL = "select distinct question_type from sandbox_feedback where     question_type not like '%All%'";
$type_array = array();
echo "<select onChange = 'showDiv(value)' required>
  <option>Select Question Type</option>";
  $result = $conn->query($getQSQL);
 if ($result->num_rows > 0) {
      while($row = $result->fetch_assoc()) {
      echo "<option>".$row['question_type']."</option>";
      $type_array[] = $row['question_type'];
      }}

echo "</select>";
for($x = 0;$x<sizeof($type_array);$x++)
{
echo "<div id = '".$type_array[$x]."' style = 'display:none'><ol>";
$questionSQL = "select question_id, question, question_form_type from sandbox_feedback where question_type in ('".$type_array[$x]."', 'All')";
 $result = $conn->query($questionSQL);

 if ($result->num_rows > 0) {

 while($row = $result->fetch_assoc()) {
 echo "<li>".$row['question'];

 if($row['question_form_type']=='boolean')
   {
      echo "<br><input type = 'radio' name = ".$row['question_id']." value = 'yes' >Yes ";

      $option_id = $type_array[$x]."_";
      $option_id .=$row['question_id']+100000;

      echo "<input type = 'radio'  name  = ".$row['question_id']." value = 'no' onClick = 'showOptions($option_id)'>No
       <div id =$option_id style = 'border-color: blue; border-style: solid; margin: 2px; display:none'>";
      $optionSQL = "select option_id, option_suggestion from sandbox_feedback_options where question_id = ".$row['question_id']." and option_type like  '%".$type_array[$x]."%'";
      $oresult = $conn->query($optionSQL);
         if ($oresult->num_rows > 0) {
      while($orow = $oresult->fetch_assoc()) {
             $od = $orow['option_id']+10000;
          echo "<input type = 'checkbox' name =     $od>".$orow['option_suggestion']."</input><p>";

}
echo "</div>";}


    }
 echo "</li>";
 }}
echo "</ol></div>";
}


 echo "<div id = 'question'></div>";

 ?>
<input type = "submit" value = "Submit">

我在想，因为我隐藏了具有相同ID的div，这可能会导致问题。

巴罗

错误可能是函数的范围，请将两个函数（显示/隐藏）放在HEAD上，而没有用于文档“加载”的换行代码。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

    <script type="text/javascript">
        function showOptions(id) {
            document.getElementById(id).style.display = "block";
        }
        function hideOptions(id) {
            document.getElementById(id).style.display = "none";
        }
    </script>

</head>
<body>
    <li>
        Lorem Ispum?    <br>
        <input type="radio" name="3" value="yes" onchange="hideOptions('100003');">Yes
        <input type="radio" name="3" value="no" onchange="showOptions('100003');">No

        <div id="100003" style="border-color: blue; border-style: solid; margin: 2px; display:none">
            <input type="checkbox" name="10004">Bacon ipsum dolor amet filet mignon turkey pork chop rump swine, shank tail beef ribs capicola salami ball tip drumstick pastrami ribeye. Andouille tail bacon ball tip brisket
        </div>
    </li>
</body>
</html>