Select div if checkbox checked

Question

How can I select the "container" div if the input checkbox inside "myCheck" is checked?
I am using the jquery print area plugin, so basically if checkbox is checked, I need to select the container div so the code should look something like $(".myCheck input:checked > div").printArea();

Here is my 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>

I have tried using the > selector but it does not seem to work:

alert( $(".myCheck input:checked > div").printArea()

Also tried this:

alert( $(".myCheck input:checked").children()).printArea()

Are you looking for an event listener on the checkbox to run the function or are you expecting to just check the state of the checkbox when the script runs? — Donnie D'Amato
– Donnie D'Amato, Commented Feb 9, 2017 at 15:13
Also the input element does not have children, so input > div is incorrect as a selector. — Donnie D'Amato
– Donnie D'Amato, Commented Feb 9, 2017 at 15:14
by adding the input in the selector, you get it, not the div, you need to go back to parent() or any other structure relation function — Kaddath
– Kaddath, Commented Feb 9, 2017 at 15:16
I am using the jquery print area plugin, so basically if checkbox is checked, I need to select the container div so the code should look something like $(".myCheck input:checked > div").printArea(); — netchi
– netchi, Commented Feb 9, 2017 at 15:20

Joseph Marikle · Accepted Answer · 2017-02-09 15:15:00Z

2

You could use .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>

answered Feb 9, 2017 at 15:15

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

charlietfl Over a year ago

would look cleaner if target specific input

Joseph Marikle Over a year ago

@charlietfl You're very correct. I could use $(this).filter(':checked').next(), but because the event listener is only for the demo, I can't be sure the input will be the context of where OP wants to execute the code. This answer just illustrates that OP should use the .next() method to select a later occurring adjacent sibling.

charlietfl Over a year ago

right but conversely would also be triggered on every input in page. Just making a note so OP is aware

Antonin Mrchd · Accepted Answer · 2017-02-09 15:18:40Z

0

Using jQuery you can use this for the checked value:

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

And you can probably use a callback function to select the container :

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

Hope it help you

answered Feb 9, 2017 at 15:18

Antonin Mrchd

6764 gold badges9 silver badges32 bronze badges

Comments

RPichioli · Accepted Answer · 2017-02-09 15:22:45Z

Run the example below, check and uncheck the component, hope it helps!

Basically, I'm using simple callback for checkbox's clicks, controlling it's state, and selecting the content if the component is checked.

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

Collectives™ on Stack Overflow

Select div if checkbox checked

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related