Javascript 选项卡作为选项卡更改基础上的无线电选择和清除复选框6

我正在尝试使用显示选项制作选项卡。比如：

显示选项

• 向所有人展示
• 藏匿
• 显示特定的
• 为特定目的隐藏

这些是选项卡，也是单选按钮

（看起来像单选按钮，但在检查时切换到其选项卡内容）

每个选项卡内容都有自己的复选框选择列表（除了“全部显示”和“全部隐藏”）

但是，在显示选项“更改”时，需要取消选中所有其他选项卡的内部内容

---

基础6，Jquery，CSS

此问题的目的是将其用作表单，以便您可以选择项目显示选项，并且根据您的选择，将有可用的项目可供显示

FORM.HTML

<div class="row">
    <div class="medium-12 columns">
        <ul class="clear-list">
            <li>
                <label class="select-label">
                    <input name="module_show_option" type="radio" value="all" checked>
                    Show on all pages
                </label>
            </li>
            <li>
                <label class="select-label">
                    <input name="module_show_option" type="radio" value="none">
                    Don't show on any page
                </label>
            </li>
            <li>
                <label class="select-label">
                    <input name="module_show_option" type="radio" value="selected">
                    Show only on selected
                </label>
            </li>
            <li>
                <label class="select-label">
                    <input name="module_show_option" type="radio" value="except">
                    Show on all except selected
                </label>
            </li>
        </ul>
        <script>
            $(document).ready(function () {
                $("input[name=module_show_option]:radio").click(function () { // attack a click event on all radio buttons with name 'radiogroup'

                    if ($(this).val() == 'all') {
                        $("input[name=module_menu_item_id]:checkbox").attr("disabled", "disabled");
                    }  else if ($(this).val() == 'none') {
                        $("input[name=module_menu_item_id]:checkbox").attr("disabled", "disabled");
                    } else if ($(this).val() == 'selected') { //check which radio button is clicked
                        $("input[name=module_menu_item_id]:checkbox").removeAttr("disabled");
                    } else if ($(this).val() == 'except') { //check which radio button is clicked
                        $("input[name=module_menu_item_id]:checkbox").removeAttr("disabled");
                    }
                });
            });
        </script>
    </div>
</div>

<div class="row">
    <div class="medium-12 columns">
        <label>
            <input type="checkbox" name="module_menu_item_id" value="1">
        </label>
        <label>
            <input type="checkbox" name="module_menu_item_id" value="2">
        </label>
        <label>
            <input type="checkbox" name="module_menu_item_id" value="3">
        </label>
        <label>
            <input type="checkbox" name="module_menu_item_id" value="4">
        </label>
        <label>
            <input type="checkbox" name="module_menu_item_id" value="4">
        </label>
    </div>
</div>

显示在所有页面上


不显示在任何页面上


仅在选定的屏幕上显示


显示除所选之外的所有


$（文档）.ready（函数（）{
$（“输入[name=module\u show\u option]：单选”）。单击（函数（）{//在所有名为“radiogroup”的单选按钮上攻击单击事件
if（$（this）.val（）=='all'）{
$（“输入[名称=模块\菜单\项目\ id]：复选框”）.attr（“禁用”、“禁用”）；
}else if（$（this）.val（）=='none'）{
$（“输入[名称=模块\菜单\项目\ id]：复选框”）.attr（“禁用”、“禁用”）；
}else if（$（this）.val（）=='selected'）{//检查单击了哪个单选按钮
$（“输入[名称=模块\菜单\项目\ id]：复选框”）.removeAttr（“禁用”）；
}else if（$（this）.val（）=='except'）{//检查单击了哪个单选按钮
$（“输入[名称=模块\菜单\项目\ id]：复选框”）.removeAttr（“禁用”）；
}
});
});

---

正如你们所看到的，我拒绝了标签内容的想法，相反，我使用了禁用输入字段，所以它将禁止在帖子正文中粘贴选中的项目，同时也将保护它们不丢失，同时你们可以做出决定

你们能发布你们的HTML吗？@dom_ahdigital，谢谢你们的回复，但我昨晚解决了这个问题，晚上我将发布完整答案（它的用途和工作原理）