如何将jQuery change（）与复选框一起使用？

Question

我正在使用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 {
      ...
    }
  })
}

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

Answer 1

该选择器：

$('checked')

寻找这样的元素：

<checked />

那不是复选框。 看一下您的HTML。 复选框是这样的：

<input type="checkbox" />

因此，您将使用以下内容：

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

或更短的：

$('input:checkbox')

---

与其他选择器相同：

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

没有<checked />元素，您需要查找以下元素：

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

也许：

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

注意：如果此选择器的目标是多个元素，则.val()可能只会返回第一个匹配元素的值。 如何解决这个问题取决于您是要定位一个更特定的元素，还是实际想要的是来自多个元素的值的集合。

Answer 2

我能够通过以下方法解决此问题：

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("");
    }
  })
}