Question

如果我们从下拉菜单中选择了一个选项，我正试图查看是否可以选中复选框。这是我正在尝试修改的模拟代码。

$('.stackoverflow').on('change', function() {
  $(this).parent().next().find('input:checkbox').attr("checked", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxes">
  <div class="checkbox_wrapper">
    <input type="checkbox" id="How" /> How</div>
  <div class="checkbox_wrapper">
    <input type="checkbox" id="Do" /> do</div>
  <div class="checkbox_wrapper">
    <input type="checkbox" id="I" /> I </div>
  <div class="checkbox_wrapper">
    <input type="checkbox" id="Force" /> force </div>
  <div class="checkbox_wrapper">
    <input type="checkbox" id="The" /> the</div>
  <div class="checkbox_wrapper">
    <input type="checkbox" id="checkbox" /> checkbox
    <select class="stackoverflow">
      <option value="to">to</option>
      <option value="be">be</option>
      <option value="selected">selected</option>
      <option value="when">when</option>
      <option value="we">we</option>
      <option value="select">select</option>
      <option value="an">an</option>
      <option value="option">option</option>
    </select>
  </div>
  <div class="checkbox_wrapper">
    <input type="checkbox" id="not this one" /> not this checkbox but the previous one</div>

如果我从下拉菜单中选择一个选项，我试图选中复选框“复选框”。是否有捷径可寻？在搜索stackoverflow时，我发现最接近的是选择下一个而不是当前的一个。非常感谢您提供任何帮助。

Answer 1

正确引用正确的复选框？

在你的情况下，你有这个：

$(this).parent().next().find('input:checkbox').attr("checked", true);

this指的是select
parent指的是<div class="checkbox_wrapper">
next会引用<div class="checkbox_wrapper">
最后find('input:checkbox')会找到：<input type="checkbox" id="not this one" />

由于您想要的复选框是select所在的同一父元素的子元素，因此next()方法调用会导致问题。

所以，你可以写：

$(this).parent().find('input:checkbox').attr("checked", true);

但是，有很多方法可以访问元素。如果它有id，这是最简单和最有效的方式。所以你最好写一下：

$('#checkbox').prop("checked", true);

此外，当您手动取消选中该复选框，然后从下拉菜单中选择一个项目时，使用.prop代替.attr，因为.attr失败。

＆＃13;

$('.stackoverflow').on('change', function() {
  $('#checkbox').prop("checked", true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxes">
  <div class="checkbox_wrapper">
    <input type="checkbox" id="How" /> How</div>
  <div class="checkbox_wrapper">
    <input type="checkbox" id="Do" /> do</div>
  <div class="checkbox_wrapper">
    <input type="checkbox" id="I" /> I </div>
  <div class="checkbox_wrapper">
    <input type="checkbox" id="Force" /> force </div>
  <div class="checkbox_wrapper">
    <input type="checkbox" id="The" /> the</div>
  <div class="checkbox_wrapper">
    <input type="checkbox" id="checkbox" /> checkbox
    <select class="stackoverflow">
      <option value="to">to</option>
      <option value="be">be</option>
      <option value="selected">selected</option>
      <option value="when">when</option>
      <option value="we">we</option>
      <option value="select">select</option>
      <option value="an">an</option>
      <option value="option">option</option>
    </select>
  </div>
  <div class="checkbox_wrapper">
    <input type="checkbox" id="not this one" /> not this checkbox but the previous one</div>

＆＃13;

Answer 2

您可以通过以下几种方式查看复选框：

$(document).ready(function() {
   $(".stackoverflow").on("change", function() {
       //$("#checkbox").prop("checked", true);
       $(this).prev("input[type='checkbox']").prop("checked", true);
   })

})

以下是根据您的示例工作的小提琴：https://jsfiddle.net/gz6mab4k/

Answer 3

Hurray，您正在使用dom元素的相对位置来定位彼此。我认为这是因为您要删除所有ID并多次将此结构添加到您的页面。所以你在javascript处理程序中有一个小错误，正如评论中提到的那样，你通过.next()来破坏东西，这将迫使处理程序在选择父项之后的div中查找一个复选框。是一个包含复选框ID =＆＃39;不是这个＆＃39;。所以你想要：

$('.stackoverflow').on('change', function() {
  $(this) // the select
    .parent() // its parent DIV
    .find('input:checkbox') // the only checkbox in the parent div
    .attr("checked", true);
});

强制选中复选框

3 个答案: