选中复选框时如何显示/隐藏下拉列表

How to show/hide dropdown when checkbox is selected

本文关键字：显示 隐藏 下拉列表 复选框 何显示      更新时间：2023-09-26

我需要使用JavaScript，但我是新手。我主要使用php。选中复选框时（选择注册中的特定角色）-取决于您选择的角色，是否显示2个下拉框。如果你选择了学生，我不想被显示这两个下降-学校和班级，如果你选择的是老师-被显示。我正在使用Codeigniter。这是我的观点：

<html>
<head>
   <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>  
</head>
<?php
   echo "<body>";
  echo validation_errors();
  echo "<div class='container'>";
  echo form_open();
 
  echo "<h3>Register</h3><br/>";  
  echo "<table border = '0' >";
  echo "<tr><td>  Username:* </td><td>";
  $data=array(
    'name' => 'username',
    'class' => form_error('username') ? 'error' : ''
  );
  echo form_input($data);
  echo "</td></tr>";
  echo "<tr><td> Password:* </td><td>";
  $data=array(
    'name' => 'password',
    'class' => form_error('password') ? 'error' : ''
  );
  echo form_password($data);
  echo "</td></tr>";
  
  echo "<tr><td>  Choose role:*  </td><td>";
  echo form_checkbox('role_id[]', '1');
  echo " Student ";
  echo form_checkbox('role_id[]', '2');
  echo " Teacher";
  echo "</td></tr>";
  echo "<tr><td>  School:*  </td><td>";
  $options=array(
    'pmg' => 'Harvard',
    'eg' => 'Cambridge',
    'class' => form_error('school[]') ? 'error' : ''
  );
  echo form_dropdown('school[]',$options);
  echo "</td></tr>";
  echo "<tr><td>  Class:*  </td><td>";
  $options=array(
    '8' => '8',
    '9' => '9',
    'class' => form_error('class[]') ? 'error' : ''
  );
  echo form_dropdown('class[]',$options);
  echo "</td></tr>";
  echo "</table><br/>";
  $data=array(
    'class' => 'btn btn-success ',
    'value' => 'Register'
  );
  echo form_submit($data);
  echo "</form>";
  echo "</div>";
  echo "</body>";
  echo "</html>";

<html>
<head>
   <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
    function showHide(self, show){
        if (show)
            $('.toggle').show();
        else
            $('.toggle').hide();
        $(":checkbox").prop('checked',false);
        $(self).prop('checked',true);
    }
    </script>   
</head>
<?php
   echo "<body>";
  echo validation_errors();
  echo "<div class='container'>";
  echo form_open();
  echo "<h3>Register</h3><br/>";  
  echo "<table border = '0' >";
  echo "<tr><td>  Username:* </td><td>";
  $data=array(
    'name' => 'username',
    'class' => form_error('username') ? 'error' : ''
  );
  echo form_input($data);
  echo "</td></tr>";
  echo "<tr><td> Password:* </td><td>";
  $data=array(
    'name' => 'password',
    'class' => form_error('password') ? 'error' : ''
  );
  echo form_password($data);
  echo "</td></tr>";
  echo "<tr><td>  Choose role:*  </td><td>";
  echo form_checkbox('role_id[]', '1', FALSE, 'onClick="showHide(this, false)"');
  echo " Student ";
  echo form_checkbox('role_id[]', '2', FALSE, 'onClick="showHide(this, true)"');
  echo " Teacher";
  echo "</td></tr>";

  echo "<tr class='toggle' style='display:none;'><td>  School:*  </td><td>";
  $options=array(
    'pmg' => 'Harvard',
    'eg' => 'Cambridge',
    'class' => form_error('school[]') ? 'error' : ''
  );
  echo form_dropdown('school[]',$options);
  echo "</td></tr>";
  echo "<tr class='toggle' style='display:none;'><td>  Class:*  </td><td>";
  $options=array(
    '8' => '8',
    '9' => '9',
    'class' => form_error('class[]') ? 'error' : ''
  );
  echo form_dropdown('class[]',$options);
  echo "</td></tr>";
  echo "</table><br/>";
  $data=array(
    'class' => 'btn btn-success ',
    'value' => 'Register'
  );
  echo form_submit($data);
  echo "</form>";
  echo "</div>";
  echo "</body>";
  echo "</html>";

增加了两个功能：

  1. 下拉列表最初是隐藏的，直到您选中"教师"复选框
  2. 选中一个复选框将取消选中另一个

这是小提琴。经过FF、IE 11和Chrome测试。

相关文章：