We Keep Coding

Checkbox isn't taking action til my cursor leaves it

I have about ten check boxes that each implement different functions. I am trying to make one master checkbox that will
a) check all 10 checkboxes;
b) implement the functions in each
I have gotten one to work but for some reason, when I check it, the others aren't checked until I move my mouse off of the master checkbox (after checking it). Bizarre, right? Here is the code for the master checkbox and the sub-checkboxes. (I have to warn you that I am a little new to javascript and it's possible that this is terribly written. Advice in that direction also welcome.)
/*change all buttons of a single genre*/
$("a[id^="+genre+"_]").attr("class", modereplacement+"Button" + " showButton");
$("a[id^="+genre+"_]").attr("onClick", function(index, currentValue){ return currentValue.replace(mode, modereplacement) ; });
$("#"+"all_"+genre+'_cur').attr("onClick",function(index, currentValue){ return currentValue.replace(mode, modereplacement) ; });
/*check all checkboxes*/
if (category =='All')
{
$("#"+"alls_cur").attr("onClick",function(index, currentValue){ return currentValue.replace(mode, modereplacement) ; });
for (var i = 0 ; i < 13 ; i++)
{
/*change individual buttons*/
var currentgenre = allgenre[i];
$("a[id^="+currentgenre+"_]").attr("class", modereplacement+"Button" + " showButton");
$("a[id^="+currentgenre+"_]").attr("onClick", function(index, currentValue){ return currentValue.replace(mode, modereplacement) ; });
/*change Quick button*/
$("#"+"all_"+currentgenre+'_cur').attr("onClick",function(index, currentValue){ return currentValue.replace(mode, modereplacement) ; });
$("#"+"all_"+currentgenre+'_cur').prop("checked", (mode == "offx"));
}
}
And here is the HTML that implements the 'Check All' aka 'Watch All' buttons:
<td><a class='quickButton'>Watch All</a></td>
<td><input type='checkbox' id='alls_cur' onclick=\"watchgenre( $user_id,'All','alls', 'offx', 1);\" ></input></td>
<td><input type='checkbox' $checkname id='alls_fut' onclick=\"watchgenre( $user_id,'All','alls', 'offx', 2);\" ></input></td>
Thanks for any advice you are able to give

try to use events (like onclick ) in jQuery like this_
$("selector").on("click", callbackOrFunction)

something like this? http://jsfiddle.net/swm53ran/118/
the below shows a snippet of the code in teh demo. the demo is showing that there are 5 check boxes and 1 check all checkbox. each box, when checked, triggers its div to have a colored background. when unchecked, it's background changes to white. the check all checkbox checks all the other check boxes and triggers their actions with the line: $(this).trigger('change');. This line of code simulates a .change() event for each of the checkboxes
<div>
<input type="checkbox" class="chkbox check1"/> Background gray <br/>
</div>
<div>
<input type="checkbox" class="chkbox check2"/> Background lightgray <br/>
</div>
<input type="checkbox" class="checkAll"/> Check All
$(document).ready(function() {
$('.checkAll').on('change', function() {
if($(this).is(':checked')) {
$('.chkbox').each(function() {
$(this).prop('checked', true);
$(this).trigger('change');
});
}
});
$('.check1').on('change', function() {
if($(this).is(':checked')) {
$(this).closest('div').css('background-color', 'gray');
}
else {
$(this).closest('div').css('background-color', 'white');
}
});
$('.check2').on('change', function() {
if($(this).is(':checked')) {
$(this).closest('div').css('background-color', 'lightgray');
}
else {
$(this).closest('div').css('background-color', 'white');
}
});
});
hope this helps!
btw, just in case you didnt know .change() or .on('change') is an event triggered when the state of the checkbox changes (from checked to unchecked and vice versa)

Multi checkbox requirement enable disable dropdown box using jquery

So first off I did search and I found this Enable/Disable a dropdownbox in jquery which got me on the right track. I'm new to jquery so when seeing other code I can adapt it to fit and work for me.
So what i'm asking is how do you make it check to see if two check boxes condition are true?
<script>
$(document).ready(function() {
$("#box1").click(function() {
if ($(this).is(":checked")) {
$("#tech1").prop("disabled", false);
} else {
$("#tech1").prop("disabled", true);
}
});
});
</script>
I want it to be if box1 and box2 are checked enable this box? I understand you can do it with an if statement, but I'm not sure where exactly it goes. Thanks in advance.
Would this work:
$("#box1").click(function() {
if ($(this).is(":checked")) &&
$("#box2").click(function() {
if ($(this).is(":checked"))
I doesn't work and I assume thats because that above creates two functions and not the if statement that I need.

Include both in the event handler, and check if both are checked
$(document).ready(function() {
var boxes = $("#box1, #box2");
boxes.on('change', function() {
var disabled = boxes.filter(':checked').length === boxes.length;
$("#tech1").prop("disabled", disabled);
});
});
FIDDLE

Consider box1 & box2 checkboxes defined with a css class boxes as below:
<input type="checkbox" id="box1" class="boxes" />
<input type="checkbox" id="box2" class="boxes" />
Now you can use box class as jquery selector to do your task
<script>
$(document).ready(function() {
$(".boxes").click(function(){
if($(".boxes:checked").size() == $(".boxes").size()){
$("#tech1").prop("disabled", false);
}else{
$("#tech1").prop("disabled", true);
}
);
});

jQuery toggle text in div based on checkbox state

I'm still in the process of learning jQuery and have run into something I can't seem to solve. I'm trying to toggle the label of a checkbox in a div located elsewhere on the page. So far I've managed to append the label only if the checkbox is unchecked, but I can't figure out how to remove the text for that filter only if it becomes unchecked. Any advice?
JQUERY:
$('.filter-single').on('click', function () {
if ($('.filter-single input').is(':checked')) {
$('<li>'+$(this).text()+' / </li>').appendTo('.filters-current');
} else {
// what goes here?
}
});
FILTER HTML:
<div class="checkbox filter-single">
<input type="checkbox" value=".rain"/>
<label>Rain</label>
</div>
LABEL HTML:
<div class="filter-details">
<span class="filter-title">Filters:</span>
<ul class="filters-current"></ul>
</div>

Demo
You can use :contains() to look for the corresponding LI and then .remove(), also i would assign the click handler to the input itself instead of the container like this:
$('.filter-single input').on('click', function () {
if ($(this).is(':checked')) {
$('<li>' + $(this).next("label").text() + ' /</li>').appendTo('.filters-current');
} else {
$(".filters-current").find("li:contains('" + $(this).next("label").text() + " /')").remove();
}
});

Something like:
$('.filters-current').html("");
This should set the inner html as empty string.

I guess you are trying to implement several filters, if not Taleeb's answer should work. If you are indeed looking for several, you could try something like this:
var filters={};
$('input:checkbox').on('click', function () {
var filter_name = $(this).siblings("label").text();
if($(this).is(":checked")){
filters[filter_name]=true;
}else{
filters[filter_name]=false;
}
displayFilters();
});
function displayFilters(){
$(".filters-current").html("");
console.log(filters)
for (var filter in filters){
if(filters[filter]){
$(".filters-current").append("<li>"+filter+"</li>")
}
}
}
Demo: http://jsfiddle.net/juvian/X65wv/

Make div appear (or disappear) on checkbox status

I have this jQuery code:
$(document).ready(function(){
$('.checkdisplay').change(function(){
if(this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
This works great only if I check the .checkdisplay radio button: the div appears, but after, if i uncheck .checkdisplay radio button, the div .todisplay doesn't disappear.
Where i'm wrong? :(
EDIT:
demo: http://jsfiddle.net/Mse2L/

You need to test all the radios and only show on the one with the correct class
You could have used ID too
Notice I use .on("click" since change needs a blur in some browsers
Live Demo
$(function(){
$("input[name='roomdoor']").on("click",function(){
if ($(this).hasClass("checkdisplay") && this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});

$(document).ready(function () {
$('.radio').change(function () {
if ($(this).hasClass('checkdisplay') && this.checked) $('.todisplay').fadeIn('slow');
else $('.todisplay').fadeOut('slow');
});
});
Demo
The problem is, you can't uncheck a radiobutton.

Problem is your radio button, you should use checkbox like,
Once a radio button having class checkdisplay is checked then it will be checked, how it can be unchecked
<input type='checkbox' class='checkdisplay' />
<div class='todisplay'>test</div>
Demo
Updated, try this like,
$(document).ready(function(){
$('.radio').change(function(){// add onchange on radio class
// check the radio has checkdisplay class or not
if($(this).hasClass('checkdisplay') && this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
Working demo

$('.checkdisplay').click(function() {
if( $(this).is(':checked')) {
$(".todisplay").fadeIn('slow');
} else {
$(".todisplay").fadeOut('slow');
}
});

Radio Button Check

I am trying to check if a radio box is checked using JavaScript, but I can't seem to figure it out properly.
This is the HTML code:
<input type="radio" name="status" id="employed_yes" value="yes">
<input type="radio" name="status" id="employed_no" value="no">
I have tried using jQuery as follows:
$(document).ready(function() {
if($('#employed_yes').is(':checked')) {
// do something
}
});
Also, I tried using pure Javascript by getting the element and check its 'checked' attribute, but it didn't work.
I look forward to your insight!
Thank you!

Use onchange
$('input[type="radio"]').on('change',function(){
if($('#employed_yes').is(':checked')) {
alert("yes");
}
});
DEMO

Try to check using name of the radio buttons like
if($('input[name="status"]').val() != "") {
// do something
} else {
alert("Select an Status");
}

Your solution doesn't work because when the page loads the checkbox's default state is unchecked, which is when the jQuery code runs.
You need to listen for the change event on the checkbox like so:
$(document).ready(function() {
$("#employed_yes").change(function() {
if(this.checked) {
document.write("checked");
}
});
});
Demo: http://jsfiddle.net/7CduY/

Try this. This will alert Hi on document ready if the any radio button is checked. If you want to check on specific event then you can bind on any event to check same.
$(document).ready(function() {
if($('input[type=radio]').is(':checked')) {
alert("Hi");
}
});

if($('input:radio:checked').text("yes") {
// do something
}
Got the idea from the jQuery forum. http://forum.jquery.com/topic/how-to-check-whether-all-radio-buttons-have-been-been-selected

Dude, I think you Wanted, whether radio button is checked or not, this what i understand from your question
If so here it is
$(document).ready(function() {
$('input[type="radio"]').on('change',function(){
if($('[name=status]:checked').length) {
alert("checked");
}
});
});
FIDDLE DEMO

Pure JS:
<input type = "button" value = "What?" name = "wic" onclick = "whatischecked(this.name);" />
Event onClick:
function whatischecked(name) {
var
emp = document.getElementById("employed_yes").checked
nonemp = document.getElementById("employed_no").checked
if (emp) {
alert("Employed");
};
if (nonemp) {
alert("Non-Employed");
};
if ((emp == false) & (nonemp == false))
{
alert("nothing checked")
};
}