如果勾選複選框，則選擇div

如果選中「myCheck」中的輸入複選框，如何選擇「容器」div？
我正在使用jquery打印區域插件，所以基本上如果複選框被選中，我需要選擇容器div，所以代碼應該看起來像$（「。myCheck input：checked> div」）。printArea（）;如果勾選複選框，則選擇div

這裏是我的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()

來源

2017-02-09 netchi

什麼叫一切是什麼意思？ – imudin07

您是否在尋找複選框上的事件偵聽器來運行該函數，或者您是否希望在腳本運行時檢查複選框的狀態？ –

另外'input'元素沒有子元素，所以'input> div'作爲選擇器是不正確的。 –

你可以使用.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>

來源

2017-02-09 15:15:00

看起來更乾淨 – charlietfl

@charlietfl您非常正確。我可以使用'$（this）.filter（'：checked'）。next（）'，但是因爲事件監聽器僅用於演示，所以我不能確定輸入是OP想要的上下文執行代碼。這個答案只是說明OP應該使用'.next（）'方法來選擇稍後出現的相鄰兄弟。 –

正確，但相反也會觸發頁面中的每個輸入。只是做一個筆記，所以OP知道 – charlietfl

使用jQuery你可以用這個選中的值：

$('.myCheck').prop('checked', true);

而且你大概可以使用一個回調函數來選擇容器：

$('.myCheckbox').is(':checked', function(e){ 
    e.preventDefault(e); 
    $('container').theMethodYouWantToUse 
});

希望它可以幫助你

來源

2017-02-09 15:18:40

運行下面的示例，選中並取消選中組件，希望它有幫助！

基本上，我對複選框的點擊使用簡單的回調，控制它的狀態，並選擇內容（如果組件被選中）。

// 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>

來源

2017-02-09 15:22:45 RPichioli

如果勾選複選框，則選擇div

回答

相關問題