We Keep Coding

Select div if checkbox checked

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()

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>

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

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>

I am trying to show some hidden div in javascript, is this a good way to do so?

I am complete beginner in javascript, I don't know many commands. The thing is I want to show that three different div element in the same exact position while clicking three different button meaning each three button have their own separate dropdown. So I check if some other dropdown is showing when I click to open some other dropdown, then I close the previous opened dropdown so both thing don't overlap. Is this efficient way to do so ?
HTML Snippet-
<header class="primary-header">
<div class="big-wrapper">
<div class="first-icon left col-1-3 ">
<img onclick="toggleDropdown("dropOne");" class="cursor-pointer dropbtn " src="assets/images/icon.32x32.user.white.png" alt="menu-nav">
<div id="dropOne" class="dropdown-content big-wrapper">
First Drop menu 1
First Drop menu 2
First Drop menu 3
</div>
</div>
<div class= "second-icon left col-1-3">
<img onclick="toggleDropdown("dropTwo")" class="cursor-pointer dropbtn" src="assets/images/icon.32x32.hearts.white.png">
<div id="dropTwo" class="dropdown-content big-wrapper">
Second Drop menu 1
Second Drop menu 2
Second Dropmenu 3
</div>
</div>
<div class=" third-icon left col-1-3">
<img onclick="toggleDropdown("dropThree")" class="cursor-pointer dropbtn" src="assets/images/icon.32x32.menu.white.png">
<div id="dropThree" class="dropdown-content big-wrapper">
Third Drop menu 1
Third Drop menu 2
Third Drop menu 3
</div>
</div>
<div class="clr"></div>
</div>
</header>
Javascript-
var dropdown1 = document.getElementById("dropOne");
var dropdown2 = document.getElementById("dropTwo");
var dropdown3 = document.getElementById("dropThree");
function toggleDropdown(elementId) {
if(elementId == "dropOne")
{
dropdown1.classList.toggle("show");
if(dropdown2.classList.contains("show"))
{
dropdown2.classList.toggle("show");
}
if(dropdown3.classList.contains("show"))
{
dropdown3.classList.toggle("show");
}
}
else if(elementId == "dropTwo")
{
dropdown2.classList.toggle("show");
if(dropdown1.classList.contains("show"))
{
dropdown1.classList.toggle("show");
}
if(dropdown3.classList.contains("show"))
{
dropdown3.classList.toggle("show");
}
}
else if(elementId == "dropThree")
{
dropdown3.classList.toggle("show");
if(dropdown2.classList.contains("show"))
{
dropdown2.classList.toggle("show");
}
if(dropdown1.classList.contains("show"))
{
dropdown1.classList.toggle("show");
}
}
}

It depends on your definition of efficient. You won't be able to increase the performance significantly since it's probably executing in few milliseconds already.
However, you can cut many line of code by using add / remove instead contain / toggle (and if for some reason the show class is added to a second dropdown, your button will start displaying or hidding the wrong items). You can also write a more generic function by looping into n array. That would allow you to add buttons and dropdowns more easily (This code isn't tested but you'll get the point.):
var dropdownArray = [];
dropdownArray.push(document.getElementById("dropOne"));
dropdownArray.push(document.getElementById("dropTwo"));
dropdownArray.push(document.getElementById("dropThree"));
function toggleDropdown(elementId) {
dropdownArray.forEach(function(dropdown){
if(dropdown.id == elementId) {
dropdown.classList.add("show");
} else {
dropdown.classList.remove("show");
}
});
}

On Checkbox click show hide div having same class dynamically

I want click on the check box and hide the respective content.
Now in my code all the content with same class gets hidden when I click any one of the checkbox.
Since my front end tags are in apex I do not want to use id, attr, name,value. I want to use class and fix this issue, exactly in the way I have written in this fiddle.
Fiddle link for reference
$('input[type="checkbox"]').click(function() {
if ($(this).is(":checked")) {
$('.div1').hide();
} else {
$('.div1').show();
}
});
<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<form>
<input type="checkbox">Exam1
<div class="div1">I am content1!
</div>
<br>
<input type="checkbox">Exam2
<div class="div1">I am content2!
</div>
<br>
<input type="checkbox">Exam3
<div class="div1">I am content3!
</div>
<br>
<input type="checkbox">Exam4
<div class="div1">I am content4!
</div>
<br>
</form>
https://jsfiddle.net/6ybp2tL6/
Is this possible??
Thanks in advance

Try this instead DEMO
$('input[type="checkbox"]').click(function() {
($(this).is(":checked")) ? $(this).next().hide() : $(this).next().show();
});

Try to hide all the divs with class div1 initially,
$(".div1").hide();
$('input[type="checkbox"]').click(function() {
$(this).next('.div1').toggle(!this.checked); //toggle(false) will hide the element
});
And toggle the visibility of the relevant div element with class div1 by using next() and toggle()
DEMO

Adding List records into container only once in Jquery

I have two containers in top and bottom,
Top container initially it will have no records i'm adding list of text from bottom container to top container on button click as of now its working fine,
but one small change in my scenario currently now multiple records are adding to my top container i want only once no multiple/same list record should appear in top container
say for example if i have one record placed above in top container next time even if i click add button same list record should not be added into top container either button should be disabled after adding list record or no duplicate record should be allowed in top container
somebody help me out in achieving it Thanks!
https://jsfiddle.net/qx69o1bd/
html
<div>
<ol id="sortable">
</ol>
</div>
<br/>
<div>
<ul id="draggable">
<li>
<div class="qitem">
<label class='lbl'>
Lance
</label>
<button class="hello" >Add To Top container</button>
</div>
</li>
<li >
<div class="qitem" >
<label>
Adam
</label>
<button class="hello" >Add To Top container</button>
</div>
</li>
<li >
<div class="qitem" >
<label>
Rickey
</label>
<button class="hello" >Add To Top container</button>
</div>
</li>
</ul>
</div>
JQuery
$(document).ready(function() {
$("#sortable").sortable();
$("button").click(function () {
var label = $(this).prev().text();
$("#sortable").append('<li>'+label+'</li>');
});
});

only add a class to disable and validate it. With css also you can stylling the button. https://jsfiddle.net/mig1098/qx69o1bd/4/
$(document).ready(function() {
$("#sortable").sortable();
$("button").click(function () {
var label = $(this).prev().text();
if(!$(this).hasClass('disabledbutton')){
$("#sortable").append('<li>'+label+'</li>');
}
$(this).addClass('disabledbutton');
});
});

$(document).ready(function() {
$("#sortable").sortable();
$("button").click(function () {
var label = $(this).prev().text();
if ($("#sortable > li:contains("+label+")").length != 0)
return;
$("#sortable").append('<li>'+label+'</li>');
});
});
This checks if there is already an element which contains the name, and if so doesn't let the user add it again!

If you use the one method to attach your listener to the click event, the button will only run your listener once (per button the selector applies to):
$("button").one('click', function () {
var label = $(this).prev().text();
$("#sortable").append('<li>'+label+'</li>');
});
If you wish to actually disable your button, you can do this by setting the disabled attribute on the object:
$("button").one('click', function () {
var label = $(this).prev().text();
$("#sortable").append('<li>'+label+'</li>');
$(this).attr('disabled', true');
});

Using jquery to toggle div when parent div is visible

I have several parent div tags with same class which contain two children divs one of which is hidden. Only one parent is shown at a time. I have a button which moves through the parent one at a time by show the next and hiding the previous. A second button has to toggle the two children divs of a parent when its visible, it however only works for the first parent and not the others.. pls sample html below.. help is much appreciated.. Thanks
<div class="parent" >
<div id="child1"> text </div>
<div id="child2" style="display:none"> text </div>
</div>
<div class="parent" style="display:none" >
<div id="child1"> text </div>
<div id="child2" style="display:none"> text </div>
</div>
<div class="parent" style="display:none" >
<div id="child1"> text </div>
<div id="child2" style="display:none"> text </div>
</div>
scripts to move through parent :
$(function () {
$(".parent:first").fadeIn(); // show first step
$("#next-step").val('Continue');
$("#back-step").hide().click(function () {
var $step = $(".parent:visible");
if ($step.prev().hasClass("parent")) { // is there any previous step?
$step.hide().prev().fadeIn(); // show it and hide current step
}
});
$("#next-step").click(function () {
var $step = $(".parent:visible");
if ($step.next().hasClass("parent")) {
$step.hide().next().fadeIn();
$("#back-step").show(); // recall to show backStep button
}
else { // this is last step, submit form
//$("#next-step").hide();
$("form").submit();
}
});
});
script for button to toggle children for each current visible parent div
$('.txtFlip').on('click', function(event) {
$('.parent:visible > #child1').slideToggle();
$('.parent:visible > #child2').slideToggle();
});
My problem now is the script to toggle child1 and child2 for each current visible parent. It only works for the first parent but not the rest. Help plz...
Thanks......

You can use jQuery's :visible selector to pick which element is currently visible and toggle based on that.
bindLoopThrough = function($button, initial_selector){
// Define a function that will apply for both sets of buttons,
// because they have similar functionality
$button.on("click", function(){
var $current = $(initial_selector),
$next = $current.next();
if($next.length===0){
$next = $current.siblings().eq(0); // Reached end, get first.
}
$current.hide();
$next.show();
});
}
bindLoopThrough($("#button1"), ".parent:visible");
bindLoopThrough($("#button2"), ".parent:visible .child:visible");