強制複選框被選中

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失敗，當你手動取消選中該複選框，然後從下拉一個項目下來。

$('.stackoverflow').on('change', function() { 
 
    $('#checkbox').prop("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>

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

華友世紀，你正在使用你的dom元素的相對位置來找到彼此。我認爲這是因爲你將擺脫所有的ID，並多次添加這個結構到你的頁面。所以你在javascript處理程序中有一個小錯誤，正如你在.next()中的註釋中提到的那樣，它會強制處理程序在選擇的父項之後尋找複選框，該選擇項的父項包含checkbox id = '不是這個'。所以你想：

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