javascript - 选中时创建一个复选框，它应该在模态中显示某些输入字段并隐藏其他输入字段

Question

<input type="checkbox" runat="server" name="Seasonal" value="Seasonal" id="isASeasonal" onclick=" if ($(this).is(':checked')) { console.log('Worky'); $('#ShowIfChecked').show(); $('#HideIfChecked').hide(); } else { $('#HideIfChecked').show(); console.log("No Worky"); }" />

我一直在尝试使用 jQuery 来实现这一点，但它一直没有正常运行，我还对压缩此代码的方法进行了大量研究。我试图用三元运算符来压缩语句。如果可以，请帮助我提供一个可能的解决方案，这将是很棒的!谢谢(三元解会很棒)

Answer 1

您的代码存在的问题是，由于代码中的 console.log("X") 调用弄乱了 输入元素。如果您检查控制台，您很可能会看到一些与此相关的错误。

正是出于这个原因，以及其他许多原因，使用内联脚本(或 CSS 样式)被认为是不好的做法。其他问题是它不利于关注点分离，并使代码更难阅读编辑。使用不显眼的 Javascript 附加事件处理程序是远更好的做法，如下所示:

$('.seasonal-checkbox').change(function() {
  $('#ShowIfChecked').toggle(this.checked);
  $('#HideIfChecked').toggle(!this.checked);
});

#ShowIfChecked {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" runat="server" name="Seasonal" value="Seasonal" id="isASeasonal" class="seasonal-checkbox" />

<div id="ShowIfChecked">Checked!</div>
<div id="HideIfChecked">Not Checked!</div>

请注意 change 事件在 click 上的使用，因此对于使用键盘浏览网页的用户，该事件仍会触发。另请注意使用 toggle() 在对每个方法的单个调用中隐藏和显示相关内容的简化逻辑，这不需要 if 语句 - 并通过代理 a也是三元表达式。