Develop Reference

Bootstrap checkboxes and jquery

I am using bootstrap check boxes which don't seem to behave the same way as normal check boxes. Looking on other posts, it seems bootstrap check boxes return a value of undefined so using a if checked does not work.
Code:
<div class="checkbox checkbox-primary">
<input id="homeaddress" type="checkbox" checked>
<label for="homeaddress">
Same As My Home Address
</label>
</div>
<div id="show-hide-address">
content
</div>
$("#show-hide-address").hide();
$(document).ready( function(){
$("#homeaddress").on("click", function(){
if ($(this).attr("checked")==undefined) {
$('#show-hide-address').slideUp(); // checked
} else {
$('#show-hide-address').slideDown(); // unchecked
}
});
});
When the page loads the checkbox is checked and the content div is invisible as it should be. When I un-check it, the content div does slide down as it should. BUT when I click the checkbox again, the slide up does not work, nothing happens. Has anyone dealt with this before. Am I missing something? Thanks,
UPDATE: added a fiddle
https://jsfiddle.net/gj3w046f/1/

Try this one:
$('#homeaddress').change(function() {
if ($(this).is(':checked')) {
$('#show-hide-address').slideUp();
} else {
$('#show-hide-address').slideDown();
}
});
here is Fiddle

You need to change the way you are checking the attribute. Use this:
$(this).is(':checked')

If check box is check display div but hide previous open div

<input type="checkbox" data-related-item="title1">
<span class="caption">Title</span>
<div class="hidden">
<h2>Title</h2>
<input type="text" id="title1">
<span class="caption">Lorem</span>
</div>
<hr>
<input type="checkbox" data-related-item="title2" checked>
<span class="caption">Title</span>
<div class="hidden">
<h2>Title</h2>
<input type="text" id="title2">
<span class="caption">Lorem</span>
</div>
Javascript
function evaluate(){
var item = $(this);
var relatedItem = $("#" + item.attr("data-related-item")).parent();
if(item.is(":checked")){
relatedItem.fadeIn();
}else{
relatedItem.fadeOut();
}
}
$('input[type="checkbox"]').click(evaluate).each(evaluate);
This was about this post: if check box is checked display div
I would like to ask how do I use this code but every time you click another checkbox it hides the previous div and opens a new one. Just showing one div/content at a time instead of showing both open. Thanks.
DEMO: http://jsfiddle.net/zgrRd/5/

You must use change instead of click function and inside evaluate function, add the following line at the start
$('input[type="checkbox"]').not($(this)).prop('checked',false).trigger('change');
Watch here fiddle

If I understand you correctly, you want only one <div> open at a time, which should correlate to a checkbox. I interpret this, that you also only checkbox checked at a time, so all other checkboxes wold need to be unchecked.
Solution 1: Use radio buttons
Solution 2: Uncheck all checkboxes and re-check the current one.
The solution for showing the <div>s is based on solution 2. Just hide all <div>s first and then show your related <div>. Give all your <div>s a certain class (e.g. class="toggling") or name to be used as a selector for closing all.
$('input[type="checkbox"]').on("click", function() {
var item = $(this);
var relatedItem = $("#" + item.attr("data-related-item")).parent();
$('.toggling').fadeOut(); //hide all
relatedItem.FadeIn(); //show the current one
});

Unexpected response for checkbox jQuery

I have horizontal jQuery checkbox. It should display some text when it is clicked and remove the text when it is clicked again and unchecked. However, when i first load the page and click on the box nothing happens. Then when i click it again to uncheck the text appears. It seems the opposite behaviour of what i expect is going on. Here is the code:
(I can solve this problem by simply inverting the boolean sign but i want to understand why this is happening).
<form>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Select your type of Restaurant:</legend>
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
<label for="checkbox-h-2a" onclick="onfilter()">Vegetarian</label>
</fieldset>
</form>
<script>
function onfilter(){
if ($("#checkbox-h-2a").prop('checked')){
document.getElementById("hehe").innerHTML = "Yo there";
}
if (!($("#checkbox-h-2a").prop('checked'))){
document.getElementById("hehe").innerHTML = "";
}
}
</script>

You're already loading jQuery , so just use jQuery for everything - it is much easier , works better, really the only downside to jQUery is having to load it - and you're already doing that. So I would suggest using something like this:
$(function(){
$(document).on('click', '#checkbox-h-2a', function(){
if ( $(this).is(':checked') ) {
// Do stuff
}
else{
//Do stuff
}
});
});
Also, I hope you are actually closing your input element in your HTML , and that this is just a typo in your question
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"
try:
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Select your type of Restaurant:</legend>
<label for="checkbox-h-2a" >Vegetarian
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" />
</label>
</fieldset>
see how the label goes around the checkbox? also you can get rid on the inline function in HTML with the jQuery I provided
EDIT:
2 problems - one you selectd jQuery 1.6 , to you .on() you need a newer version , if you must use old jQuery let me know ,
the other problem is that all jQuery code must be wrapped in
$(document).ready(function(){
/// code here
});
or for short:
$(function(){
// code here
});

The problem is at the time of clicking on the label, the checkbox's checked has not been changed, so you have to toggle the logic (although it looks weird) or attach the handler to the onchange event of the checkbox input instead:
<!-- add onchange event handler -->
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"
onchange="onfilter()"/>
<!-- and remove the click handler -->
<label for="checkbox-h-2a">Vegetarian</label>
Demo.
It involves how a label works, when clicking on the label, it looks for the attached input element via the for attribute and trying to change the appropriate property (checked for checkbox, radio, ...) or focusing the element (for textbox fields). So at the clicking time, it processes/calls your handler first. Hence the problem.
Note that this answer just fixes the issue, not trying to improve your code.

JQuery .trigger click event not working under IE

I am using the following code to route click events on an img tag to an input radio below it. The code works perfectly on Chrome and other browsers, but on IE (specifically IE 11) I must double click to get the radio selected instead of just single click to get the radio input selected. Can someone please tell me what I am doing wrong, missing here? Thanks
<script type="text/javascript">
$(document).ready(function() {
$('#Img1').click(function() {
$('#radio1').trigger('click');
});
});
</script>
<div class="imagesPrev col four center">
<label class="label_radio images" for="radio1">
<div class="labelText">
<img id="Img1"src="image1.gif" alt="Image 1" />
<input type="radio" id="radio1" name="radio1" value="image1"/>
</div>
<div style="height:10px;"></div>
Image Title <br/>
</label>
</div>
Notes:
- I also noticed that I don't have to double click as normal double click, but it has to be two clicks. Meaning one click then I can wait for like 10-15 seconds then do the 2nd click to get the click event routed to the radio input.

http://jsfiddle.net/89wTk/
You should use .prop(); when dealing with checkbox/radio inputs.
$(document).ready(function() {
$('#Img1').click(function() {
var checkBox = $("#radio1");
checkBox.prop("checked", !checkBox.prop("checked"));
});
});

Have you tried using a label tag with a for attribute for this feature instead, this could solve your problem and be more browser compatible.
<label for="radio1"><img id="Img1"src="image1.gif" alt="Image 1" /></label>
<input type="radio" id="radio1" name="radio1" value="image1"/>
I can understand if this doesn't achieve what you need, but using this method should work using HTML markup instead of jQuery
relatively horrible jsfiddle demoing this:
http://jsfiddle.net/andyface/d25KS/

I remember that some version of IE don't support clicking objects other than links or buttons :(
Perhaps try using:
$("#radio1").checked(true);
or
$("#radio1").selected(true);
as a work around

Just simple, you don't have to use any Jquery for this, just keep everything inside the label:
<label for="radio_btn">
<img id="img"src="image1.gif" alt="Image here" />
<input type="radio" id="radio_btn" name="radio1" value="image1"/>
</label>
Working here: http://jsfiddle.net/fals/3phf4/

Your code example works fine in IE11 (desktop and metro). Is it possible that there is another click event on the page that is capturing and preventing the click event on the image? Maybe something is causing the page to lose focus (first click gets window focus second clicks the image)? Try putting an alert in the click function to see if the click is getting registered. If that's not the issue, try running the body of the function in the console to see if that is the issue. You might try other ways to trigger the event, as suggested by others. Or try the jQuery .triggerHandler("click") method.

I think your problem may be with your markup. You have your image and click events inside a label.
According to w3schools:
"...if the user clicks on the text within the element, it toggles the control."
http://www.w3schools.com/tags/tag_label.asp
That toggle is perhaps messing with your javascript. Try moving the markup outside of the label and see if that helps.

That's an easy one :).
The #img1 is encapsulated inside the
<label class="label_radio images" for="radio1">
So, without the jQuery part it's already working. Now when having the jQuery part, a single click will become a double click:
1) 'for' element of label_radio
2) the trigger in jQuery part
So, for x-browser, you should not wrap the img inside the label.
Or try to cancel the event in $('#Img1').click(function(event) { ...

You have both your img and radio wrapped in label.
HTML's default behavior is that click on label triggers radio/checkbox inside.
There are two ways you can solve your problem:
Remove javascript function altogether.
If there's additional reason for javascript, change your html markup, and move radio outside of the label. Also remove for attribute, cause it triggers radio selection. Something like this:
<div class="imagesPrev col four center">
<label class="label_radio images">
<div class="labelText">
<img id="Img1"src="image1.gif" alt="Image 1" />
</div>
</label>
<input type="radio" id="radio1" name="radio1" value="image1"/>
<div style="height:10px;"></div>
Image Title
</div>

<script type="text/javascript">
$(document).on('click','.Img1',function()
{
var checkBox = $(".radio1");
checkBox.prop("checked", !checkBox.prop("checked"));
});
</script>
<img class="Img1" src="image1.gif" alt="Image 1" />
<input type="radio" class="radio1" name="radio1" value="image1"/>

I am facing the same issue and its very weird .... the workaround that is working for me is that instead of using the trigger function .. put the code which is executed in the trigger click event in a javascript function and call that function instead of trigger event ... example is given below.
For this example i will use an alert in case of a click on the element with id radio1.
Event definition
$('#radio1').on('click',function () {
alert("Hi");
})
So Instead of using $('#radio1').trigger('click'); we can put the alert in a javascript function and call the javascript function where ever i am calling the trigger click event.
Javascript function
function triggerClick(){
alert("Hi")
}
and just call this function(triggerClick()) where ever you are using $('#radio1').trigger('click');
Please let me know if this is helpfull

Try to use .click() instead of .trigger('click'):
<script>
$(document).ready(function() {
$('#Img1').click(function() {
$('#radio1').click();
});
});
</script>
it should work, see here for more info

Show/Hide div with button

I have a a HTML page with a button which shoes hidden content when pressed. I am using jquery code which I have bundled into my HTML page. When I press the button to show the content in the hidden div it works find, however when I press the button again to hide the content nothing happens. If anyone could help me that would be great. Also how would I be able to target multiple buttons. Would I just paste the same jquery code and label it '2' and then '3' and so on for example? Any working examples would be great. Here is my code:
HTML:
<head>
<script>
$(document).ready(function() {
$("#spoiler1").hide();
$("#button1").click(function() {
$("#spoiler1").show(300);
});
});
</script>
</head>
<button id="button1">Adventurer ▼</button>
<div id="spoiler1" style="display:none">
<p>1. Climb a tree<input type="checkbox" /></p>
<p>2. Roll down a really big hill<input type="checkbox" ></p>
<p>3. Camp out in the wild<input type="checkbox" ></p>
<p>4. Build a den<input type="checkbox" ></p>
<p>5. Skim a stone<input type="checkbox" ></p>
</div>
Thanks in advance for any help or advice.

Use .toggle() instead
$(document).ready(function () {
$("#spoiler1").hide();
$("#button1").click(function () {
$("#spoiler1").toggle('slow');
});
});
Demo
Update
And the idea about having mutiple buttons, I've come up with the approach that you should try, use classes instead of IDs for the buttons and provide the same ID to divs that you want to toggle. This might take some design issues but you can manage and this is just a basic guideline to move forward.
As Markup is too long for mutiple divs so i'm posting only.
JQuery
$(document).ready(function () {
$(".category").click(function () {
$(".show").hide();
var divToShow = $(this).text().split(" ")[0];
$("#" + divToShow).toggle('slow');
});
});
Updated Fiddle

$(document).ready(function(){
$("#spoiler1").hide();
$("#button1").click(function(){
if($("#spoiler1").is(':visible')){
$("#spoiler1").slideUp(300);
}
else
{
$("#spoiler1").slideDown(300);
}
});
});
Demo:
http://jsfiddle.net/YvUDV/

Use toggle instead:
$('#button1').bind("click",function(){
$("#spoiler1").toggle("fast");
});

As for multiple button event. Assign a class name to the button so you can select by class.
$('button.toggle-div').click(function(){...});
As for visibility toggle, there are a number of ways.
Use toggle() in jQuery. (the most obvious choice, but in practice we could also..)
Use toggleClass() link to
add/remove a class which has a display:none css rule. (more flexible, you can toggle other css styles like the font color, background, etc.)
Use some
two-way binding JavaScript libraries like knockoutjs or angular.
(Probably an overkill for a small application. But it will
definitely reduce the amount of coding if it is a large scale.)