字段启用禁用javascript不工作

我有两个单选按钮，我想根据用户在单选按钮中选择的值在html页面上显示一些值

我的html文件：

<form action="">
<input type="radio" name="calenders" value="calendar_details_b2b">B2B
<br>
<input type="radio" name="calenders" value="calendar_details_b2c">B2C
</form>
<div id="calendar_details_b2c" >
   content of B2C
</div>
<div id="calendar_details_b2b">
   content of B2B
</div>

商对商


商对客
B2C的内容
B2B的内容

这是JS小提琴，它工作得很好：

现在，当我更改Id时，它不起作用

编辑

我已经在我的rails应用程序_form.html.erb中添加了这段代码，我正在new.hrml.erb页面上呈现这段代码

<script    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

  $('input[type=radio][name=calenders]').change(function () {
  $('#calendar_details_b2b').css("display","none");
  $('#calendar_details_b2c').css("display","none");
  console.log($(this).val());
  var fieldToShow = $(this).val();
  $("#" + fieldToShow).css("display","block");
  });

});
</script>

$（文档）.ready（函数（）{
$（'input[type=radio][name=Calendars]'）。更改（函数（）{
$（'日历'详细信息'）.css（“显示”，“无”）；
$（“#日历_详细信息_b2c”）.css（“显示”、“无”）；
log（$（this.val（））；
var fieldToShow=$（this.val（）；
$（“#”+fieldToShow）.css（“显示”、“块”）；
});
});

---

但是它仍然不起作用。

一旦添加JQuery引用，它就可以正常工作了

#数据分析，
#研究与设计{
显示：无；
}
商对商


商对客
B2B的内容
B2C的内容
$（'input[type=radio][name=Calendars]'）。更改（函数（）{
$（'study#u Design'）.css（“display”，“none”）；
$（“#数据分析”）.css（“显示”、“无”）；
log（$（this.val（））；
var fieldToShow=$（this.val（）；
$（“#”+fieldToShow）.css（“显示”、“块”）；
});

由于未添加jquery引用，您将收到一个错误。您需要解释“仍然不工作”的实际含义。你有错误吗？你检查控制台了吗？当我单击任意单选按钮时，隐藏的部分没有出现…忽略console.log（$（this.val（））；那么我需要在我的JS函数号之间写javascript函数吗？那不行。您需要将：

（或从中获取JQuery的任何路径）添加到您的`。。。标签。（仅供参考，请确保您引用的是您计划使用的JQuery的正确版本-有关详细信息，请参阅：这样--“我的代码”是，但您可以省去不再需要的type=text/javascript。@MohammadShahbaz您的原始问题已得到回答。如果需要，请对提供的答案进行投票并发布新问题。@MohammadShahbaz因为我的答案说明了为什么你的代码不起作用。