Question

我有一个带有值的多个复选框。

$(".content-items input[name=Category[]']").prop('checked', false);

<ul class="me-list">
  <li>
    <label class="container">
            Filter1
    			<input class="content-items" type="checkbox" value="1" name="category[]" />
    			<span class="checkmark"/>
    		</label>
  </li>
  <li>
    <label class="container">
            Filter2
    			<input class="content-items" type="checkbox" value="3" name="category[]" />
    			<span class="checkmark"/>
    		</label>
  </li>
  <li>
    <label class="container">
            Filter1
    			<input class="content-items" type="checkbox" value="5" name="category[] />
    			<span class="checkmark"/>
    		</label>
  </li>
</ul>

我想取消选中name=Category[]和Value=5时的复选框

当我使用此代码时，请取消选中具有相同名称的所有复选框。

Answer 1

我认为您使用的选择器有点错误，您希望将input作为类的content-items，将其命名为category[]，并将值等于5。在选择器中使用单引号和双引号，反之亦然，以获取属性值的完全匹配。应该执行以下操作：

//uncheck all
$('input.content-items[name="category[]"]').prop('checked', false);
//check desired
$('input.content-items[name="category[]"][value="5"]').prop('checked', "checked" /*true*/);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="me-list">
  <li>
    <label class="container">
    Filter1
   <input class="content-items" type="checkbox" value="1" name="category[]">
   <span class="checkmark"></span>
  </label>
  </li>
  <li>
    <label class="container">
    Filter2
   <input class="content-items" type="checkbox" value="3" name="category[]">
   <span class="checkmark"></span>
  </label>
  </li>
  <li>
    <label class="container">
    Filter1
   <input class="content-items" type="checkbox" value="5" name="category[]">
   <span class="checkmark"></span>
  </label>
  </li>

Answer 2

首先，您的查询选择器错误。要选择input（或其他任何元素），请在查询中首先将其写入。

通过在类前面加点.来选择类。因此，要选择具有特定类的元素，应编写input.content-items。

要选择具有特定属性的元素，请编写[name='category[]']。您必须用引号将要选择的值括起来。要选择多个属性，只需将它们一个接一个地写。

所以您的选择器将是-

$("input.content-items[name='category[]'][value=5]");

https://jsfiddle.net/de8w4f7t/

Answer 3

您只需要将选择器更改为$("input[name='category[]'][value=5]")

演示：

$('#uncheck').on("click", function() {
  $("input[name='category[]'][value=5]").prop('checked', false);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="me-list">
 <li>
  <label class="container">
    Filter1
   <input class="content-items" type="checkbox" value="1" name="category[]" checked>
   <span class="checkmark"></span>
  </label>
 </li>
 <li>
  <label class="container">
    Filter2
   <input class="content-items" type="checkbox" value="3" name="category[]" checked>
   <span class="checkmark"></span>
  </label>
 </li>
 <li>
  <label class="container">
    Filter1
   <input class="content-items" type="checkbox" value="5" name="category[]" checked>
   <span class="checkmark"></span>
  </label>
 </li>
 <button id="uncheck">uncheck</button>

Answer 4

您可以更改查询选择器，使其仅使用multiple attribute选择器选择值为5的查询选择器：

$(".content-items[name='category[]'][value='5']").prop('checked', false);

请参见以下示例：

$(".content-items[name='category[]'][value='5']").prop('checked', false);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="me-list">
 <li>
  <label class="container">
    Filter1
   <input class="content-items" type="checkbox" value="1" name="category[]" checked>
   <span class="checkmark"></span>
  </label>
 </li>
 <li>
  <label class="container">
    Filter2
   <input class="content-items" type="checkbox" value="3" name="category[]" checked>
   <span class="checkmark"></span>
  </label>
 </li>
 <li>
  <label class="container">
    Filter1
   <input class="content-items" type="checkbox" value="5" name="category[]" checked>
   <span class="checkmark"></span>
  </label>
 </li>

注意：出于演示目的，我向每个复选框添加了checked，以表明该复选框未被选中

Answer 5

您可以使用attributeMultiple selector。

名称属性值中也有错字（Category[]应该是category[]）。

请注意：：如果 tagName 和 class 指定相同的元素，则应使用 tagName.className 。如果属性值包含[]，则还必须用引号将其引起来。

$("input.content-items[name='category[]'][value=5]").prop('checked', false);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="me-list">
 <li>
  <label class="container">
    Filter1
   <input class="content-items" type="checkbox" checked value="1" name="category[]">
   <span class="checkmark"></span>
  </label>
 </li>
 <li>
  <label class="container">
    Filter2
   <input class="content-items" type="checkbox" checked value="3" name="category[]">
   <span class="checkmark"></span>
  </label>
 </li>
 <li>
  <label class="container">
    Filter1
   <input class="content-items" type="checkbox" checked value="5" name="category[]">
   <span class="checkmark"></span>
  </label>
 </li>

Answer 6

var nodes = document.querySelectorAll('.content-items input[name=Category[]')

您可以遍历节点，并且只要您要检查为false的节点都可以做到

node.checked = false;

Answer 7

我们更改为$(".content-items input[value=5]").prop('checked', false);

如何选中/取消选中具有值属性的复选框输入？

7 个答案: