i need to hide div1 and show div2 when checkbox1 is checked
i have used below code but it didn't work
<script type="text/javascript">
function valueChanged() {
if ($('.checkbox1').is(":checked"))
$(".div2").show();
else
$(".div1").hide();
}
</script>
Html
<input type="checkbox" name="checkbox1" onchange="valueChanged()" />
<div class="row" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none">Show Div 2</div>
Instead you can just use toggle()
function valueChanged() {
$('.row').toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" onchange="valueChanged()" />
<div class="row show" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none">Show Div 2</div>
If you want to keep it JS based your logic isn't quite right. Corrections below:
HTML Update:
<input id="checkbox1" type="checkbox" name="checkbox1" onchange="valueChanged()">
<div class="row" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none;">Show Div 2</div></div>
Javascript:
<script type="text/javascript">
function valueChanged() {
if ($("#checkbox1").is(":checked")) {
$("#div2").show();
$("#div1").hide();
} else {
$("#div1").show();
$("#div2").hide();
}
}
</script>
If you want to do it with just CSS instead add a class or id to the checkbox as well and use the ~ selector. You'll also want to remove the inline display none on the div2.
#div2 { display:none; }
#checkbox:checked ~ #div1 { display:none; }
#checkbox:checked ~ #div2 { display:block; }
You code is not correct. It should be like this:
function valueChanged() {
if ($('#checkbox1').is(":checked")) {
$("#div1").hide();
$("#div2").show();
} else {
$("#div1").show();
$("#div2").hide();
}
}
// OR you could just use toggle()
function valueChanged2() {
$('.row').toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1" onchange="valueChanged()" />
<div class="row" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none">Show Div 2</div>
You use not correct access to elements
<script type="text/javascript">
function valueChanged() {
if ($(this).is(":checked"))
$("#div2").show();
else
$("#div1").hide();
}
</script>
Related
I added on my site a div, which sometimes displays 1 child div and sometimes more than 1 and I want add a class to Body tag if the childs div are 1 if not give to body another class.
I tried this code, but it did not work :
JavaScript
setInterval(function(){
if(jQuery('div#program-days .row').length > 1)
jQuery('body').addClass('bodyclass1');
else
jQuery('body').removeClass('bodyclass2');
}, 1000);
HTML
<div id="program-days">
<div class="row">program 1</div>
<div class="row">program 2</div>
<div class="row">program 3</div>
</div>
You should removeClass and addClass like this
setInterval(function(){
if(jQuery('div#program-days .row').length > 1){
jQuery('body').addClass('bodyclass1');
jQuery('body').removeClass('bodyclass2');
}
else{
jQuery('body').removeClass('bodyclass1');
jQuery('body').addClass('bodyclass2');
}
}, 1000);
setInterval(function(){
if(jQuery('div#program-days .row').length > 1){
jQuery('body').addClass('bodyclass1');
jQuery('body').removeClass('bodyclass2');
}
else{
jQuery('body').removeClass('bodyclass1');
jQuery('body').addClass('bodyclass2');
}
}, 1000);
.bodyclass1{
background-color:red;
}
.bodyclass2{
background-color:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="program-days">
<div class="row">program 1</div>
<div class="row">program 2</div>
<div class="row">program 3</div>
</div>
You can try this code, up on click on try now the class will be added to the body if childs are more than one
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment node! -->
<button onclick="myFunction()">Try it</button>
<div id="program-days">
<div class="row">program 1</div>
<div class="row">program 2</div>
<div class="row">program 3</div>
</div>
<script>
function myFunction() {
var parent = document.getElementById("program-days");
if (parent.childNodes.length > 1) {
document.body.classList.add('myclass');
}
}
</script>
</body>
</html>
You dont remove the other class when you add the class:
Here is an example using non-jQuery:
Javascript:
setInterval(function(){
var els = document.querySelectorAll("#program-days .row");
var body = document.querySelector("body");
if (els.length > 1) {
body.classList.add("red-border");
body.classList.remove("blue-border");
} else {
body.classList.add("blue-border");
body.classList.remove("red-border");
}
}, 1000);
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="program-days">
<div class="row">program 1</div>
<div class="row">program 2</div>
<div class="row">program 3</div>
</div>
</body>
</html>
CSS:
.red-border {
border: 1px solid red;
}
.blue-border {
border: 1px solid blue;
}
Working plunker: http://plnkr.co/edit/ATP63ZWXASTwFaG2jM3y?p=preview
It can be done with jQuery aswell, using your syntax.
function func(x) {
var y = $("#" + (x.id));
//nextAll get the number at the end of their id -=1
//y.nextAll().attr('id', )
//
y.remove()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maindiv">
<div id="div1" onclick="func(this)">Lorem</div>
<div id="div2" onclick="func(this)">Ipsum</div>
<div id="div3" onclick="func(this)">Dolor</div>
<div id="div4" onclick="func(this)">Sit</div>
<div id="div5" onclick="func(this)">Amet</div>
</div>
How would I loop through every div after the selected div?
For example, if the user clicks on div2, div3 will have a function, along with div4 and div5.
You can use each to iterate the elements in the selection
function func(x) {
var y = $(x);
y.nextAll().each(function(index, element){
// do something
})
y.remove()
}
To catch only the divs after the clicked element:
function func(x) {
$(x).nextAll().remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maindiv">
<div id="div1" onclick="func(this)">Lorem</div>
<div id="div2" onclick="func(this)">Ipsum</div>
<div id="div3" onclick="func(this)">Dolor</div>
<div id="div4" onclick="func(this)">Sit</div>
<div id="div5" onclick="func(this)">Amet</div>
</div>
An alternative is using Next Siblings Selector (“target selector ~ next siblings selector”)
$('[id^=div]').on('click', function() {
$(`#${$(this).attr('id')} ~ div`).fadeOut(function() {
$(this).remove()
});
});
[id^=div] {
border: 1px dashed lightgreen;
padding: 5px;
margin: 5px;
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maindiv">
<div id="div1">Lorem</div>
<div id="div2">Ipsum</div>
<div id="div3">Dolor</div>
<div id="div4">Sit</div>
<div id="div5">Amet</div>
</div>
i have created two forms, one form having the div that div id is "one" second form having the another div id is "two".When div one hover the div two wants to be displayed. i have tried like this.
<form action="">
<div id="one">
<p>source of hover content</p>
</div>
</form>
<form action="">
<div id="two">
<p>destination of hover content</p>
</div>
</form>
In Css:
#two{
display: none;
}
#one:hover #two {
display: block;
}
To show/hide second div on hover of first div use below script.
$(function(){
$("#one,#two").hover(function(){
$("#two").show();
},function(){
$("#two").hide();
});
});
Please check working demo:
$(function(){
$("#one,#two").hover(function(){
$("#two").show();
},function(){
$("#two").hide();
});
});
#two{
display: none;
}
#one:hover #two {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="one">
<p>source of hover content</p>
</div>
</form>
<form action="">
<div id="two">
<p>destination of hover content</p>
</div>
</form>
var clr;
$(document).ready(function()
{
$(function() {
$("#one,#two").bind('mouseout', function(){
clr = setTimeout( function(){$("#two").css("display", "none");} , 2000);
})
});
$(function() {
$("#one,#two").bind('mouseover', function(){
clearTimeout(clr);
$("#two").css("display", "block");
})
});
});
var clr;
$(document).ready(function()
{
$(function() {
$("#one,#two").bind('mouseout', function(){
clr = setTimeout( function(){$("#two").css("display", "none");} , 500);
})
});
$(function() {
$("#one,#two").bind('mouseover', function(){
clearTimeout(clr);
$("#two").css("display", "block");
})
});
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<form action="">
<div id="one" style="border: 1px solid #000; width:200px;padding:5px;">
<p>source of hover content</p>
</div>
</form>
<form action="">
<div id="two" style="border: 1px solid #000; width:200px;padding:5px;display:none;">
<p>destination of hover content</p>
</div>
</form>
Give an ID to each of your forms
Then, you can use jQuery to point a specific element within a form
<form id="form1" action="">
<div id="one">
<p>source of hover content</p>
</div>
</form>
<form id="form2" action="">
<div id="two">
<p>destination of hover content</p>
</div>
</form>
Using jQuery you can specify each element inside a particular form
$(document).ready(function() {
$("#form2 #two").hide();
$("#form1 #one").hover(function(){
$("#form2 #two").show();
});
});
Pure JavaScript and supported in all browsers using Element.style.display and Element.onmouseover & Element.onmouseout for hover events
String.prototype.Tshow = function(s){
document.getElementById(this).style.display = s ? "block" : "none";
}
document.getElementById("one").onmouseover = function(){"two".Tshow(true)}
//to hide onmouseout
/*
document.getElementById("one").onmouseout = function(){"two".Tshow(false)}
*/
#two{
display: none;
}
#one:hover{
display: block;
}
<form action="">
<div id="one">
<p>source of hover content</p>
</div>
</form>
<form action="">
<div id="two">
<p>destination of hover content</p>
</div>
</form>
I have four checkboxes ,clicking any of them returns respective html code from server. I want that on selecting 2 checkboxes screen should split in 2, similarly on selecting 3 checkboxes into 3.
how to write logic using Jquery, HTML and CSS.
$(document).ready(function () {
$("#go").click(function () {
$("#output1").html('');
$("#output2").html('');
$("#output3").html('');
$("#output4").html('');
if ($('#getdisabledusers').prop("checked") == true)
{
$("#output1").html("<img src='http://blog.teamtreehouse.com/wp-content/uploads/2015/05/InternetSlowdown_Day.gif' width='200' height='200' />");
$("#box1").addClass("checkedbox");
$.ajax({
url: "/MVC_client/getdisabledusers",
success: function (data) {
$("#output1").html(data);
}
});
}
Here i have one of my method in JS. Output1, output2, output3.... are the four divs. If checkbox is true , an ajax call will be there to return output.
you can do the thing you want using css display:table and display:table-cell: DEMO
HTML
<div class="checkbox-container">
<div class="input-box">
<input type="checkbox"><label>option 1</label>
</div>
<div class="input-box">
<input type="checkbox"><label>option 2</label>
</div>
<div class="input-box">
<input type="checkbox"><label>option 3</label>
</div>
<div class="input-box">
<input type="checkbox"><label>option 4</label>
</div>
</div>
<div class="container">
<section></section>
<section></section>
<section></section>
<section></section>
</div>
SCSS
.container{
width:100%;
height:500px;
display:table;
section{
display:none;
&.show{
display:table-cell;
}
&:nth-child(1){
background-color:red;
}
&:nth-child(2){
background-color:yellow;
}
&:nth-child(3){
background-color:blue;
}
&:nth-child(4){
background-color:green;
}
}
}
.checkbox-container{
text-align:center;
.input-box{
display:inline-block;
}
}
jQuery
$('input[type=checkbox]').change(function(){
var index=$(this).parent().index();
if($(this).is(':checked')){
$('section').eq(index).addClass('show');
//your ajax call goes here
}
else{
$('section').eq(index).removeClass('show');
}
});
I have multiple Divs based rows. Each row contains a check box.
I want to click on that row anywhere, it should check uncheck that specific checkbox.
Here is the what I tried till now DEMO: http://jsfiddle.net/kERYB/19/
JS :
$('.row').click(function ()
{
$(this).closest(":checkbox").attr("checked", checked");
});
HTML:
<div class="row">
<div class="left">
<input type="checkbox" class="cb-element" value="1" />
</div>
<div class="left">
<select><option>choose</option></select>
</div>
<div class="right">
This is First Record
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">
<input type="checkbox" class="cb-element" value="1" />
</div>
<div class="left">
<select><option>choose</option></select>
</div>
<div class="right">
This is Second Record
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">
<input type="checkbox" class="cb-element" value="1" />
</div>
<div class="left">
<select><option>choose</option></select>
</div>
<div class="right">
This is Third Record
</div>
<div class="clear"></div>
</div>
CSS:
.row {
width:300px;
padding:4px;
border:1px solid #000;
margin:2px;
}
.left {
float:left;
width:50px;
}
.right {
float:right;
}
.clear {
clear:both;
}
}
You can do this without if condition.
Working Demo
Jquery
$('.row').click(function ()
{
$(this).find('input[type=checkbox]').prop("checked", !$(this).find('input[type=checkbox]').prop("checked"));
});
Update (with variable) See Demo
jQuery
$('.row').click(function ()
{
var checkbox = $(this).find('input[type=checkbox]');
checkbox.prop("checked", !checkbox.prop("checked"));
});
Update 2: Fixed Bug on Cliking input See Demo
$('input[type=checkbox]').click(function (e)
{
e.stopPropagation();
return true;
});
Update 3: Without jQuery See Demo
Wrap the row with label
<label>
<div class="row">
...
</div>
</label>
Update 4: To exclude select tag See Demo
$('input[type=checkbox], .row select').click(function (e)
{
e.stopPropagation();
return true;
});
Try with this one :
$('.row').click(function ()
{
$(this).find('div:first input:checkbox').prop('checked', true)
}
);
Try in fiddle
Updated:
$('.row').click(function ()
{
if($(this).find('div:first input:checkbox').is(':checked')){
$(this).find('div:first input:checkbox').prop('checked', false)
}
else{
$(this).find('div:first input:checkbox').prop('checked', true)
}
});
Try in fiddle
You can do it simply with HTML.
<input type="checkbox" class="cb-element" id="my-checkbox" value="1" />
<label for="my-checkbox">here you click to check or uncheck.</label>
id of 'input' should be value of 'for' attribute of 'label' tag.
Here checkbox id is 'my-checkbox' and in label --for="my-checkbox")--.
You can see an example: http://jsfiddle.net/kERYB/21/
You can use .find for this.
$(this).find('input[type=checkbox]').prop("checked", true);
http://api.jquery.com/find/
To check uncheck, use this -
$('.row').click(function ()
{
var cb = $(this).find(':checkbox');
if (cb.is(':checked')) {
cb.prop('checked', false);
} else {
cb.prop('checked', true);
}
});
Update Fiddle - http://jsfiddle.net/kERYB/14/
$(document).ready(function (){
$('.row').click(function (e){
var cur = $(this).find('input[type=checkbox]');
if(cur.prop("checked"))
{
$(this).find('input[type=checkbox]').prop("checked", false);
}
else
{
$(this).find('input[type=checkbox]').prop("checked", true);
}
});
});
this will be good for you....
$('.row').click(function ()
{
if ( $(this).find(".cb-element").prop('checked') == true){
$(this).find(".cb-element").prop('checked', false);
}
else{
$(this).find(".cb-element").prop('checked', true);
}
});
http://jsfiddle.net/kERYB/13/