问题：选中 input[type="radio"] 时 jQuery 更改 css（值）答案

【问题标题】：Problem: jQuery change css when input[type="radio"] is checked (value)问题：选中 input[type="radio"] 时 jQuery 更改 css（值）
【发布时间】：2021-10-09 21:33:50
【问题描述】：

我想更改带有 data-id="group-vraag" 的 div 的 css (display:block;) 当单选按钮被选中时 value="Vraag" 并且当单选按钮未被选中时更改css to (display: none;)

我无法让它工作。

编辑：正如您在屏幕截图中看到的那样；两个收音机都使用[name="radio-keuze"]。我特别想以“Vraag”为目标。我可以为此使用.wpcf7-list-item .first 吗？

$('input[type=radio][name="radio-keuze"]').change(function() {
    if($(this).val() == 'Vraag') {
        $('div[data-id="group-vraag"]').css({"display":"block"});
    }
  else if($(this).val() == '') {
        $('div[data-id="group-vraag"]').css({"display":"none"});
    }
});

这里是html

【问题讨论】：

收音机的价值永远不会改变。其中一个属性checked 将从true 更改为false。因此，您不想查看 Value 而是查看输入的 checked 属性。
所以我可以使用.wpcf7-list-item .first，然后当input[type="radio"]:checked 然后$('div[data-id="group-vraag"]').css({"display":"block"});。 jQuery 代码会是什么？（我是新手）

标签： jquery css input radio

【解决方案1】：

试试这个

$('input[type="radio"][name="radio-keuze"]').change(function() {
    if($(this).val() == 'Vraag') {
        $('div[data-id="group-vraag"]').css({"display":"block"});
    }
  else if($(this).val() == '') {
        $('div[data-id="group-vraag"]').css({"display":"none"});
    }
});

我在 type=radio 周围添加了 ""。

【讨论】：

似乎仍然无法正常工作，我已经用一些额外的 html 代码更新了屏幕截图。也许你看到了我没有看到的东西（顺便说一句，我对 jQuery 很陌生）

【解决方案2】：

您需要检查收音机是否为checked。 jQuery 有一个快速的方法来检查这个作为选择器，:checked。你可以这样做：

$('input[value="Vraag"]').change(function() {
  if($(this).is(":checked")) {
    $('div[data-id="group-vraag"]').css({"display":"block"});
  } else {
    $('div[data-id="group-vraag"]').css({"display":"none"});
  }
});

您也可以这样做：

$('input[type=radio][name="radio-keuze"]').change(function() {
  if($(this).prop("checked") && $(this).val() == "Vraag") {
    $('div[data-id="group-vraag"]').css({"display":"block"});
  } else {
    $('div[data-id="group-vraag"]').css({"display":"none"});
  }
});

有很多方法可以确认某个特定元素已被更改。

【讨论】：

如你在截图中看到的；两个收音机都使用[name="radio-keuze"]。我特别想以“Vraag”为目标。我可以为此使用.wpcf7-list-item .first 吗？
@Max 从您的帖子中不清楚。我已经更新了我的答案。