Here's my problem, I want an entire div to be click able, when clicked I need the radio button contained in the div to be checked, so the div acts as a radio itself. Here's what I thought I could use;
$('#content').click(function(e) {
$('input:radio[name="id_"]').prop('checked', true);
});
But this is not selecting the relative radio inside the div. I think I can use a this selector, am I right?
You don't give any code, so I guess:
DEMO
See my demo on CodePen
HTML
<div class="content">
<input type="radio" name="foo">
</div>
<div class="content">
<input type="radio" name="foo">
</div>
<div class="content">
<input type="radio" name="foo">
</div>
CSS (for example)
.content {
float: left;
width: 100px;
padding-top: 100px;
background-color: #eee;
margin-left: 10px;
}
JS (JQUERY)
$('.content').click(function(){
$(this).find('input[type=radio]').prop('checked', true);
})
Yes you can use the this selector. I have made a quick jsfiddle to show you an example.
This should do it.
$('input:radio[name*="id_"]'), assuming the name starts with id_
And yes you can use this. Use it to filter down its children like:
$(this).children('input:radio[name*=id_]').prop("checked", true)
The key is using name*=id_
This means select element whose name starts with id_. Isn't that what you wanted ?
$('#content').click(function(){
$(this).children('radio').attr('checked','checked')
})
building on Deif's solution this will toggle the checked status when clicking on the div
fiddle
<div id="content">
Some content
<input type="radio" id="radio1" value="test" />
</div>
<script type="text/javascript">
$('#content').click(function () {
var val = $(this).find('input:radio').prop('checked')?false:true;
$(this).find('input:radio').prop('checked', val);
});
</script>
Try with this:
$('div').click(function(){
if( $('div').find('input:checkbox').prop("checked") == true){
$('div').find('input:checkbox').prop("checked", false);
}
else{
$('div').find('input:checkbox').prop("checked", true);
}
});
LIVE DEMO
Related
good morning guys,
I have 3 checkboxes created in php. one that i want to use as a controller
<p>
<?php $creates = array('name'=> 'single_obs_value','class' => 'singleobsyes','value'=> '1','style'=>' float: left; margin-right: 2px;'); ?>
<?=form_label('Single Observation : ');?>
<?=form_checkbox($creates);?>
<br>
</p>
And the other two are brought in from a database array variable.
<p>
<?php foreach($obsnames as $cp){ ?>
<?php $create = array('name'=> 'cms_permissions[]','class' => 'singleobs','value'=> $cp->id,'style'=>' float: left; margin-right: 10px;'); ?>
<span style="width:200px; float:left">
<?=form_checkbox($create ).' '.form_label($cp->field_name);?>
</span>
<?php } ?>
</p>
How do i first make the two brought in by the database invisible when the page loads. Then when the controller checkbox is ticked make the two checkboxes visible again. If possible with a jquery function that uses the class of the controller checkbox as such.
$('#singleobsyes').change(function(){
Rather than
$('input[type="checkbox"']
As i use other checkboxes on the page and i believe that may cause some conflict.
try this
$(document).ready(function(){
$('input[type="checkbox"]').not('.singleobsyes').hide();// hide all checkboxes other than controller
$('.singleobsyes').change(function(){
if($(this).is(':checked')
$('input[type="checkbox"]').not('.singleobsyes').show();
else
$('input[type="checkbox"]').not('.singleobsyes').hide();
});
});
update: see this fiddle
you can also do this with css selectors as
html
<input type="checkbox" class="singleobsyes" name="a"/>check to show others
<input type="checkbox" class="singleobs" name="b"/>
<input type="checkbox" class="singleobs" name="c"/>
css
.singleobs{
display:none;
}
.singleobsyes:checked ~ .singleobs{
display:block !important;
}
fiddle
you can use wrapper too
fiddle v2
To make the checkboxes invisible you can style="display:none"
Now you can put on the "main" check box an onchange="showem();" attribute.
function showem()
{
$('#checkbox1id').toggle();
$('#checkbox2id').toggle();
}
EDIT: Changes show to toogle
You can make it simple this way,
$(document).ready(function(){
$('input[type="checkbox"]').not('.singleobsyes').hide();
$('.singleobsyes').on("change", function(){
$('input[type="checkbox"]').not('.singleobsyes').toggle();
});
});
<h1>Welcome! Chat now!</h1>
<button id="button">Chat Now</button>
<button id="buttontwo">Chat Categories</button>
<div id="login" style="visibility:hidden">
<button id="closelogin">Close</button>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
When the chat now button is pressed, I want to make the div "login" appear, and when the "closelogin" button inside the div is pressed, I want to make the whole div hidden again. Currently if no buttons are pressed the div should be at hidden state, cheers!
Use jQuery. No way to do it plain html/css.
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
If you don't have jQuery included, use javascript:
document.getElementById('button').onclick = function() {
document.getElementById('login').style.visibility = 'visible';
}
document.getElementById('closelogin').onclick = function() {
document.getElementById('login').style.visibility = 'hidden';
}
Look at my example without using of JavaScript.
<input type="checkbox" id="box"/>
<label id="container" for="box">
<div id="button">Chat Now</div>
<div id="login">
<label for="box" id="closelogin">Close</label>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
</label>
and css
#box{display: none;}
#container #login{ display: none;}
#box:checked + #container #login{ display: block;}
Fiddle http://jsfiddle.net/LUdyb/1/
Hope this help.
Using javascript with the help of the button id you can make the div to be hidden by changing the css property to visible. while using jquery you can use toggle,hide,show.
There is no way you can do this in html/css
You can use Jquery
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
to close
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
you just need to change the ID that is #closelogin and the .css('visibility', 'hidden')
You need to include Jquery library like this in your head or bottom of your page to make it work.
eg:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
</head>
<body>
credit card
<a href="javascript:hideshow(document.getElementById('adiv123'))">
<input type="checkbox" />
</a>
<div id="adiv123" style="font:24px normal; style=display:block;">
check
<input type="text" name="check" class="styled"/>
</div>
</body>
</html>
The output of the program must be:
it should display the text when we check the checkbox and should hide the text when checkbox was unchecked.
In this case,when we open the output for the first time the text was displayed without checking the checkbox.
can anyone clarify why it was happening?
This happens because you don't run the hideshow function until you click on your checkbox (why did you wrap it into a link?). So after the pageload the adjacent div is always displayed, regardless of the state of the checkbox element.
Anyway, if you don't support IE8 and previous, you can achieve the same behaviour with css only. E.g.
html
<input type="checkbox" />
<fieldset>
<span>checked</span>
<input type="text" name="check" class="styled"/>
</fieldset>
Css
input + fieldset { display: none }
input:checked + fieldset { display: block }
have a look here: http://jsfiddle.net/Uhcxd/
CODE
document.getElementById("adiv123").style.display = "none";
document.getElementById("showHide").onchange = function(){
if(this.checked)
document.getElementById("adiv123").style.display = "block";
else
document.getElementById("adiv123").style.display = "none";
}
OR, based on your code: http://jsfiddle.net/Uhcxd/1/
I changed this:
<div id="adiv123" style="font:24px normal; style=display:block;">
to this
<div id="adiv123" style="font:24px normal;display:none;">
Well, for starters, your markup is invalid. Specifically, this:
style="font:24px normal; style=display:block;"
is wrong. I think you meant this:
style="font:24px normal; display:block;"
If you wanted the element hidden on page load, you actually wanted this:
style="font:24px normal; display:none;"
I want to do the following:
I have three checkboxes:
Hide Box1
Hide Box2
Hide Box3
I want to use Jquery to:
When Box1 checked, hide box 2 and 3, if unchecked make box 2 and 3 visible. Also where do I place the code?
Thanks in advance
Here is a complete example using the markup you gave in the comment. I also took the liberty to give the checkbox's labels which means when you click the text it will toggle the checkbox (more accessible and usable).
See on JSFiddle
HTML
<form>
<div class="toggle-checkbox">
<input type="checkbox" name="checkMeOut" id="box1" />
<label for="box1">Hide Box1</label>
</div>
<div class="toggle-checkbox">
<input type="checkbox" name="checkMeOut" id="box2" />
<label for="box2">Hide Box2</label>
</div>
<div class="toggle-checkbox">
<input type="checkbox" name="checkbox3" id="box3" />
<label for="box3">Hide Box3</label>
</div>
</form>
jQuery
$('.toggle-checkbox input[type=checkbox]').click(function () {
if ($(this).is(':checked')) {
$('.toggle-checkbox').not($(this).closest('.toggle-checkbox')).hide();
} else {
$('.toggle-checkbox').show();
}
});
To include jQuery in your page, place the following within your <head> tag.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
You could do this in between tags
$('.one').click(function () {
if ($(this).is(':checked')) {
$('input[type=checkbox]').not(this).hide();
} else {
$('input[type=checkbox]').not(this).show();
}
});
http://jsfiddle.net/davidchase03/MYASr/
Assuming your checkboxes have the ids "box1", "box2" and "box3":
$(document).ready(function(){
$("#box1").change(function(){
$("#box2, #box3").toggle();
}
}
I haven't tested this, but anytime hide box 1 is checked or unchecked, it will toggle the visibility of the other two boxes.
The optimal place for your code would be inside of a script element located just before your closing body tag, so something like
<body>
Your page stuff here
<script>
Code from above here
</script>
</body>
I have two forms in different tabs, each crossover field has it's value duplicating to the other form onchange/keyup.
When my checkboxes change there is also a background image change to highlight the selection, for some reason I cannot figure out why but when the checkboxes are turned on they will not turn off again.
jsfiddle link > http://jsfiddle.net/UMwkV/
html
<fieldset class="fieldset-form left">
<label>Flammable</label>
<div class="clear"></div>
<div class="flammable"></div>
<input type="checkbox" id="flammable" class="flamcheck" name="flammable" value="1" style="width:12px; height:12px; margin:0 auto; display:block; margin-top:5;">
</fieldset>
<fieldset class="fieldset-form left">
<label>Flammable</label>
<div class="clear"></div>
<div class="flammable"></div>
<input type="checkbox" id="flammable" class="flamcheck" name="flammable" value="1" style="width:12px; height:12px; margin:0 auto; display:block; margin-top:5;">
</fieldset>
jQuery
$("input[name=flammable]").change(function() {
if ($('.flamcheck').is(":checked")) {
$('.flammable').css("backgroundColor", "url(images/flame-on.png)");
$('.flamcheck').prop("checked", true);
}
if (!$('.flamcheck').is(":checked")) {
$('.flammable').css("backgroundImage", "url(images/flammable.png)");
$('.flamcheck').prop("checked", false);
}
})
If anyone could point out the obvious thing I'm missing it would be greatly appreciated.
use
$(this).is(":checked")
instead
http://jsfiddle.net/UMwkV/6/
$.is() returns true when at least one element matches the selector. Once when both boxes are checked, when you click on one box again, the other checkbox still will be checked, so is() will always return true when you run it on both checkboxes.
AFAIK .is(':checked') runs against the DOM as it was rendered over the wire, not the current live DOM.
So the solution is to use .prop('checked') instead
http://jsfiddle.net/UMwkV/1/
Version 2 allows for independant checking:
http://jsfiddle.net/UMwkV/2/
Version 3 causes mutual updating, and both checkboxes are clickable:
http://jsfiddle.net/UMwkV/8/
I figured out the issue.This code will just work fine
$(".flamcheck").change(function() {
if ($(this).prop("checked") == true ) {
$('.flammable').css("backgroundColor", "url(images/flame-on.png)");
$('.flamcheck').prop("checked", true);
}
if ($(this).prop("checked") == false) {
$('.flammable').css("backgroundImage", "url(images/flammable.png)");
$('.flamcheck').prop("checked", false);
}
});
Check this- http://jsfiddle.net/UMwkV/10/
check this working demo
your code has a syntax error i have corrected it please check the fiddle