[英]How to select a div inside another element when a checkbox input is checked?
[英]Select div if checkbox checked
如果選中“ myCheck”中的輸入復選框,如何選擇“容器” div?
我正在使用jquery打印區域插件,因此,基本上,如果選中了checkbox,則需要選擇容器div,因此代碼應類似於$(“。myCheck input:checked> div”)。printArea();。
這是我的HTML:
<div class="content">
<div class = "myCheck"><input type="checkbox" />
<div class = "container">
<img src="https://www.kent.ac.uk/graduateschool/images/email-thumbnail.jpg" alt="My new Image">
</div>
</div>
</div>
我試過使用>
選擇器,但它似乎不起作用:
alert( $(".myCheck input:checked > div").printArea()
還嘗試了這個:
alert( $(".myCheck input:checked").children()).printArea()
您可以使用.next()
$('input').on('change', function(){ console.log($(".myCheck input:checked").next().html()); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class = "myCheck"><input type="checkbox" /> <div class = "container"> <img src="//placehold.it/50" alt="My new Image"> </div> </div> </div>
使用jQuery,您可以將其用作檢查值:
$('.myCheck').prop('checked', true);
您可能可以使用回調函數來選擇容器:
$('.myCheckbox').is(':checked', function(e){
e.preventDefault(e);
$('container').theMethodYouWantToUse
});
希望對你有幫助
運行以下示例,選中並取消選中該組件,希望對您有所幫助!
基本上,我對復選框的單擊使用簡單的回調,控制其狀態,並在檢查組件時選擇內容。
// Waiting for DOM load $(document).ready(function() { // Callback for checkbox's click $(".myCheck > input[type='checkbox']").on("click", function() { // Setting the container variable as null var container = null; // Checking if the checkbox is "checked" if ($(this).is(":checked")) { // Selecting the container node object, so you can use it as you want var container = $(".container"); // Console warnings console.info("Container selected, the checkbox must be checked!"); console.log("Some test information from container: " + $(container).find('span').html()); } else { // Console warnings console.info("Container not selected, the checkbox must be checked!"); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class="myCheck"> <input type="checkbox" /> <div class = "container"> <span>Some example content..</span> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.