jquery - 如何使用复选框隐藏/显示或在两个 div 表单字段之间切换？

Question

我目前正在处理一个表单，我想使用复选框显示/隐藏 div 表单字段。在我的研究中，我遇到了；

在此处使用单选按钮显示/隐藏输入表单字段: https://codepen.io/chriscoyier/pen/LEGXOK

我想应用复选框而不是单选按钮来显示/隐藏 div 表单字段而不是输入。

例子:我想创建一个申请者可以上传他们的简历/简历的申请 Material 使用复选框

上传表单脚本:

<div class="element-file" title="Click here to Upload Resume"><label class="title"></label><div class="item-cont"><label class="large"><div class="button">UPLOAD</div><div class="file_text">NO UPLOAD DETECTED</div><span class="icon-place"></span></label></div></div>

或

手动输入:

<div class="element-input" title="Enter your Full Name as indicated here."><label class="title"><span class="required">Required</span></label><div class="item-cont"><span class="icon-place"></span></div></div>

我想使用复选框在这两个 Div 表单字段之间切换使用此示例中的行为: https://codepen.io/chriscoyier/pen/LEGXOK

在此先感谢您的支持。

Answer 1

只需将这段代码添加到您的 bindUIActions 方法中。它将切换复选框。

  bindUIActions: function() {
    $("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired, function() {
      if (this.id == 'choice-animals-dogs') {
        var checked = ($('#choice-animals-cats').checked) ? true : false;
        $('#choice-animals-cats').prop('checked', checked);
      }
      if (this.id == 'choice-animals-cats') {
        var checked = ($('#choice-animals-dogs').checked) ? true : false;
        $('#choice-animals-dogs').prop('checked', checked);
      }
    });
  },