Question

我希望在单击单选按钮时隐藏/显示div有所帮助。

我拥有的JS是

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

我有一个php脚本，可以创建一个包含7-10个是/否问题的表单。当我选择＆＃34; no＆＃34;我希望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可能导致问题。

Answer 1

错误可能是函数的范围，将两个函数（show / hide）放在HEAD上，而不包含文件“onload”的包装代码。

<!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>

这是一个工作示例：https://jsfiddle.net/hbmsxy7a/

Answer 2

您为“是”和“否”定义了竞争onchange属性。当您单击一个时，它们都会发生变化，因此两个函数都会触发：showOptions()和hideOptions()。最终结果是你的div保持隐藏。

我建议使用onClick代替onChange。此外，如果您的网页使用HTML4，则不允许整数作为ID，因此您可以通过在ID中添加前缀来解决问题：

echo "<div id=\"prefix" . $option_id . "\" ...";

你的JS功能变为：

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

Answer 3

我最终根据上面的所有答案改变了隐藏方式。

if（$ result-＆gt; num_rows＆gt; 0）{

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

if($row['question_form_type']=='boolean')
   {
       $option_id = $type_array[$x];
      $option_id .=$row['question_id']+100000;
      echo "<br><select onChange = 'showOptions(value)' required>><Option value = 'yes_$option_id' >Yes</option> ";



      echo "<option value = $option_id>No</option></select>
      <div id ='$option_id' style = 'border-color: #ccc; 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>";

}

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

3 个答案: