如何使用带有复选框的jQuery change（）？

Posted 2021-05-06

我正在使用Sharepoint并正在创建一个带有注入javascript和JQuery的列表。如果用户选择“其他”选项，我正在尝试显示一个文本框。此选项最初来自下拉列表，但现在基于多个选项的复选框。

这是基于下拉列表的代码：

function TargetAudienceChange(){
  $('select').on('change', function(){
    var TargetAudience = $('select[id*=TargetAudience]').val();
    if (TargetAudience == 'Other (Specify)'){
      $("h3.ms-standardheader:contains('Other Cultural Awareness')").closest("tr").show();
    }
    else {
      $("h3.ms-standardheader:contains('Other Cultural Awareness')").closest("tr").hide();
      $('input[id*=OtherTargetAudience]').val("");
    }
  })
}

我尝试了这个没有成功：

function TargetAudienceChange(){
  $('checked').on('change', function(){
    var TargetAudience = $('checked[id*=TargetAudience]').val();
    if (TargetAudience == 'Other (Specify)'){
      ...
    }
    else {
      ...
    }
  })
}

如何根据允许多个选择的复选框使此代码适用于选项？

答案

这个选择器：

$('checked')

正在寻找这样的元素：

<checked />

这不是一个复选框。看看你的html。一个复选框是这样的：

<input type="checkbox" />

所以你要使用这样的东西：

$('input[type="checkbox"]')

或者更短的：

$('input:checkbox')

---

与您的其他选择器相同：

$('checked[id*=TargetAudience]')

没有<checked />元素，你会寻找像这样的元素：

$('input[id*=TargetAudience]')

也许：

$('input[type=checkbox][id*=TargetAudience]')

注意：如果此选择器的目标是多个元素，那么.val()可能只会返回第一个匹配元素的值。如何解决这个问题取决于您是否要定位更具体的元素，或者您实际需要的是多个元素的值集合。

另一答案

我能够解决这个问题：

function TargetAudienceChange(){
  $('input[id*=TargetAudience]').on('change', function(){
    if ($(this).prop('checked') == true && $(this).next().text() == 'Other (Specify)'){
      $("h3.ms-standardheader:contains('Other Cultural Awareness')").closest("tr").show();
    }
    else if ($(this).prop('checked') == false && $(this).next().text() == 'Other (Specify)') {
      $("h3.ms-standardheader:contains('Other Cultural Awareness')").closest("tr").hide();
      $('input[id*=OtherTargetAudience]').val("");
    }
  })
}