如果勾选复选框，则选择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

回答

相关问题