PHP 如果选中复选框<选择>则会显示列表

php if checkbox checked <select> list appear

本文关键字：列表 显示 选择 如果 复选框 PHP      更新时间：2023-09-26

我有以下问题，我创建了一个带有ckeckbox的简单页面，我希望当选中复选框时出现（列表），如果未选中list2，则出现，而不使用sumbit

<body>
    <input type="checkbox1" name="ckeck">
    <?php if checkbox1 is ckecked { ?>
    <select name="list" size="1">
        <option value="0">0</option>
        <option value="1">1</option>
    </select>
    <?php } else { ?>
    <select name="list2" size="1">
        <option value="12">12</option>
        <option value="25">25</option>
    </select>
    <?php } ?>
</body>

我希望代码能提供更多帮助。

如果您希望列表在不使用提交的情况下显示（这意味着当您单击复选框时它会显示），则需要使用诸如 Javascript 之类的语言的客户端脚本，而不是 PHP。PHP 只能控制发送到客户端的输出，一旦它在客户端上显示在浏览器中，您需要客户端语言才能进行更改。

我强烈建议您使用库来执行此操作，因为这将处理许多您需要手动完成的事情。如果您使用非常流行和广泛的 JQuery 库，您的代码可能如下所示

<html >
  <body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
  $(function() {
	$("#list").hide();
	$("#ckeck").change(function() {  
		  if($(this).is(":checked")) {
			$("#list").show();
			$("#list2").hide();
		  }
		  else
		  {
			$("#list").hide();
			$("#list2").show();
		  }
	  });
  });
  </script>
  <input type="checkbox" name="ckeck" id="ckeck">
  <select name="list" id="list" size="1">
	<option value="0">0</option>  
	<option value="1">1</option>
  </select>   
  <select name="list2" id="list2" size="1">
	<option value="12">12</option>  
	<option value="25">25</option>
  </select>   
</body>
</html>

PHP 无法访问 DOM;你需要 JavaScript 来实现这一点。如果您必须使用 PHP 来响应复选框，那么您将需要研究使用 AJAX。基本上，您将使用JavaScript（理想情况下是jQuery）对即时复选框事件做出反应，该事件将使用AJAX与您的PHP脚本进行通信。你的PHP脚本将返回某种数据。数据可以是包含列表数据的JSON（我推荐这个），可以是要执行的原始JavaScript代码，也可以只是返回一个布尔值，用于确定列表是否显示。这些只是一些想法。

如果这不是安全问题，你可以把所有的PHP逻辑移到客户端，用JavaScript做所有事情。您可能会有更好的用户体验，并且有可能减少服务器压力。

dr：改用JS。否则使用 JS 处理复选框事件，AJAX 针对 PHP 脚本，PHP 生成数据，JS 解释结果。

尝试使用 .toogle（），如下所示：

$('#checkbox1').change(function() {
  $("select[name='list']").toggle(this.checked);
  $("select[name='list2']").toggle(!this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="check" id="checkbox1">
<select name="list" size="1" style="display:none">
  <option value="0">0</option>
  <option value="1">1</option>
</select>
<select name="list2" size="1">
  <option value="12">12</option>
  <option value="25">25</option>
</select>

在这里查看它的实际效果： http://jsfiddle.net/mk02qmjh/1/

相关文章：