如何隐藏单选按钮后方文本及关联标签（仅JS/CSS修改）

你当前的代码只隐藏了item_35317的标签和单选框本身，但两个选项的文本是在单选框的父容器<div class="mx_form_input_option">内，并没有被隐藏。要解决这个问题，你可以直接选中item_35317所在的整个表单行（.mx_form_row）进行显示/隐藏，一次性覆盖标签、单选框和对应的选项文本。

修改点 #

将原代码中这一行：

$("label[for=item_35317], input[type=radio][name=item_35317]").toggle(this.value == "0");

替换为：

$("label[for=item_35317]").closest(".mx_form_row").toggle(this.value == "0");

closest(".mx_form_row")会定位到当前标签最近的父级.mx_form_row容器，对这个容器进行toggle操作，就能把整个Ophaaladres行的所有内容（包括标签和两个选项）一起显示或隐藏。

完整代码 #

$("input[name=item_35174][value='1']").prop('checked', true);

$("input[name='item_35174']").change(function() {
  // 隐藏/显示item_35317所在的整个表单行
  $("label[for=item_35317]").closest(".mx_form_row").toggle(this.value == "0");
  $("label[for=item_35175], input#item_35175").hide();
  $("label[for=item_35176], input#item_35176").hide();
  $("label[for=item_35177], input#item_35177").hide();

});
$("input[name='item_35174']:checked").change(); //trigger correct state onload

$("input[name='item_35317']").change(function() {
  $("label[for=item_35175], input#item_35175").toggle(this.value == "1");
  $("label[for=item_35176], input#item_35176").toggle(this.value == "1");
  $("label[for=item_35177], input#item_35177").toggle(this.value == "1");
});
$("input[name='item_35317']:checked").change(); //trigger correct state onload

可选方案（若不想隐藏整个行） #

如果仅需隐藏标签和选项、保留行结构，可选中标签和它的兄弟.mx_form_input容器：

$("label[for=item_35317], label[for=item_35317] + .mx_form_input").toggle(this.value == "0");

内容的提问来源于stack exchange，提问作者Smileface