Question

我需要使用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>";

Answer 1

<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>";

增加了两个功能：

下拉列表最初是隐藏的，直到您选择＆＃34;教师＆＃34;复选框
选中一个复选框将取消选中另一个

这是jsfiddle。测试了FF，IE 11，Chrome。

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

1 个答案: