如何在 wordpress 中将单选按钮添加到我的网站

Posted 2023-03-27

【中文标题】如何在 wordpress 中将单选按钮添加到我的网站

【英文标题】：How to add radio button to my website in wordpress

【发布时间】：2018-08-08 06:32:16

【问题描述】：

我正在为我的网站使用 WordPress。 我想在选择单选按钮时向我的 WordPress 页面添加单选按钮 我想在下面显示一个表格。谁能帮帮我

【问题讨论】：

您创建一个自定义页面并在其中添加单选按钮。并使用jQuery显示或隐藏数据表

【参考方案1】：

您好，也许更多细节可以帮助人们告诉您更好的答案。但与 这么多信息我有东西给你：这只是 样本。您只需要针对您的特定目的进行编辑。 ** 将 html 代码放入 wordpress 编辑器 （放入编辑器部分，不是可视化的，可视化编辑器可能会自动转换一些标签）

** 把 js 代码放到你的 js 脚本标签的某个地方！！如果您没有任何想法，请使用this plugin

** 如果 jQuery 不起作用，请将此行添加到您的主题或子主题的 function.php 以将 jQuery 库添加到您的页面（99% wordpress 通过 默认加载它强>）：

// include custom jQuery
function shapeSpace_include_custom_jquery() 

    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);


add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');

HTML 代码：

<form>
  <div>
    <input type="radio" name="fruit" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div id="show-table"></div>
</form>

脚本代码：

<script>
    jQuery(document).ready(function ($) 
        $("input").on("click", function () 
            var checkedNode = $("input:checked").val();
            var orangTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>orang</td></tr></table>';
            var appleTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>apple</td></tr></table>';
            var bananaTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>banana</td></tr></table>';

            switch (checkedNode) 
                case 'orange':
                    $("#show-table").html(orangTable);
                    break;
                case 'apple':
                    $("#show-table").html(appleTable);
                    break;
                case 'banana':
                    $("#show-table").html(bananaTable);
                    break;

                default:

            
        
    
</script>

分配给每个按钮的特定表格将显示在 div 中 id="show-table" 当该按钮选中时。你可以扩展这个 你有什么目的的方法。只知道这不是有效的 方法或最佳方法。 这只是一种方式..