Question

我有一个复选框列表。每个人都有关联的数据插入隐藏的输入中。当复选框为checked时，我想找到最接近的隐藏输入，其中名称包含字符串“ ID”。我alert(obj.val());时收到“未定义”错误。名称中的ID是动态的，因此我无法使用确切的名称。

$('.cb-org').change(function(){
  if ($(this).is(':checked')){
    var obj = $(this).closest('input:hidden[name*="ID"]');
    alert(obj.val());
  }
});

li{
  list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
  <input type="hidden" name="OrganisationEntities[0].Name" value="My Org 2" />
  <input type="hidden" name="OrganisationEntities[0].ID" value="1" />
  <label>
    <input type="checkbox" class="cb-org" />
    My Org
  </label>
</li>
<li>
  <input type="hidden" name="OrganisationEntities[1].Name" value="My Org" />
  <input type="hidden" name="OrganisationEntities[1].ID" value="2" />
  <label>
    <input type="checkbox" class="cb-org" />
    My Org 2
  </label>
</li>
</ul>

Answer 1

如果将隐藏的输入内容移动到标签内，则可以大大简化查询

<label >
  <input type="checkbox" class="cb-org" />
  My Org
  <input type="hidden" name="OrganisationEntities[0].Name" value="My Org 2" />
  <input type="hidden" name="OrganisationEntities[0].ID" value="1" />
</label>

或者，如果您将复选框移动到标签之外，并使用for属性将其链接到标签

<input id="my-checkbox-id" type="checkbox" class="cb-org" />
<label for="my-checkbox-id">
  My Org
</label>
<input type="hidden" name="OrganisationEntities[0].Name" value="My Org 2" />
<input type="hidden" name="OrganisationEntities[0].ID" value="1" />

在这两种情况下，复选框和隐藏的输入均为同级，从而允许进行更简单的查询，例如

$('.cb-org').on('change', function() {
  $checkbox = $(this) // cache "this" so we don't have to re-select it

  if ($checkbox.is(':checked')) {
    var $hidden = $checkbox.siblings('input:hidden[name$="ID"]').first()
    alert($hidden.val())
  }
});

Answer 2

我们要做的就是从复选框向上移动到包含type UserOptions = { userName: string, email: string, roles?: number[]; // not int, what is int? } // here is a fake() for Users function getDefaultUser(): UserOptions { return { userName: "fred", email: "fred@example.com", roles: [] } } // make your new constructor: const User = makeModel(getDefaultUser); // const User: ModelConstructor<UserOptions>; // use your constructor: const user = new User({ userName: "George", email: "george@example.com" }); // const User: UserOptions;的元素，然后在name属性中找到包含“ ID”的隐藏输入。

li

$('.cb-org').change(function(){
  if ($(this).is(':checked')){
    var obj = $(this).closest('li').find('input:hidden[name*="ID"]');
    alert(obj.val());
  }
});

li{
  list-style: none;
}

Answer 3

我假设您的 OrganisationEntities [1] .ID 得到一些 ID 包含 ID ，所以请尝试

$('.cb-org').change(function(){
	if ($(this).is(':checked')){
  	var obj = $(this).closest('li').find('input:hidden[name*="ID"]');
    if(obj.length < 1){
      obj = $(this).closest('ul').find('input:hidden[name*="ID"]');
      if(obj.length < 1){
        alert('ID NOT EXIST');
        return false;
      }
    }
    alert(obj.val())
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
  <input type="hidden" name="NAMEICONTAINID" value="idiotValueName1" />
  <input type="hidden" name="" value="idiotValueID" />
  <label>
    <input type="checkbox" class="cb-org" />
    1
  </label>
  </li>
<li>
  <input type="hidden" name="NAMEICONTAIN" value="idiotValueName2" />
  <input type="hidden" name="" value="idiotValueID2" />
  <label>
    <input type="checkbox" class="cb-org" />
    2
  </label>
  </li>
</ul>

如果您不希望别人做到这一点，请尝试

首先，我会搜索当前最接近的父级（如果存在）提醒它，其次，我搜索当前父级的外部父级（如果存在）会发出警报。

您可以看到名称是否包含ID，如果您想尝试将ID更改为除ID以外的其他名称，则会选择该输入

jQuery查找名称属性包含ID的最接近的隐藏输入

3 个答案: