We Keep Coding

Display a div based on a checkboxes' value

I have a div in a form (#sides) that I only want displayed when one checkbox (.opp-choice-checkbox) is not checked. Here's the code I have right now:
jQuery ->
if !$(".opp-choice-checkbox").checked
$("#sides").hide()
$(".opp-choice-checkbox").click ->
$("#sides").slideToggle()
A similar question is asked a lot, but the difference with my question is that when I go to edit the object the form is for, sometimes the checkbox is checked by default. In that situation, I want the div to be showing when the page is loaded. The code I have right now hides the div by default, regardless of whether or not the checkbox is checked

UPDATED
Your code working perfectly with the little update mentioned below, See Working fiddle for your code:
CoffeeScript :
You have just to add the else in your condition to show the div if the checkbox is checked :
jQuery ->
if !$(".opp-choice-checkbox").is(":checked")
$("#sides").hide()
else
$("#sides").show()
$(".opp-choice-checkbox").click ->
$("#sides").slideToggle()
If sometimes you have a chekcked checkbox by default, you have just to remove condition and replace your coofee code by the following :
jQuery ->
$(".opp-choice-checkbox").change ->
$("#sides").slideToggle()
See fiddle HERE.
I hope this will help.

$(".opp-choice-checkbox") doesn't have a checked property - that's a jQuery element. To get the regular DOM elem, use [0]
$(".opp-choice-checkbox")[0].checked
Or, use .is("checked")
$(".opp-choice-checkbox").is("checked")
If this is all attached to a change or click event, just run that event on load to trigger the behavior, ($(elem).change(function() { }).change())

html radio button checked issue

I have a couple of radio buttons in my application and by default none of them is checked. When I check one of them, and call a javascript to see which is checked, the radio button which is checked does not show checked in JS or HTML Markup(F12). I dont knw what's causing this wierd issue. Kindly assist.
Thanks
EDIT: i'm using the following JS to see if the parent container of the radio buttons has "CHECKED" in its innerHTML.
if( document.getElementById('ctl00_ContentPlaceHolder1_' +
controlid).cells[cv].innerHTML.indexOf("CHECKED") > -1)

You can use this code to check if a checkbox is checked:
if (document.getElementById('checkboxId').checked == true)
//Code here...
The DOM-attribute "checked" does not change when you click the checkbox, it's used to know how it should be initialised.

In JQuery there is a convenient selector for that.
$("input:checked").each(function(i,v){
console.log(v.value);
})
Here is an example:
http://jsfiddle.net/f369xbt5/3/

The state of checkbox looks updated, but it is not updated actually

I have strange issue. I am developing something for Magento. I added link "Select all categories" and add a jQuery event to check all checkboxes when I click on it. It works great, but somehow the html is not updated and Magento can't see that all inputs are selected. But when I manually click on a checkbox, it updates html (I am looking at the console) and Magento save button works just fine.
How to resolve this issue? I am not sure what else should I do to perform updating html. It look like it works (checkboxes are selected), but please take a look at the console and html. Html must be updated.
I created jsfiddle: here

try this:
.attr('checked', 'checked');

Just check all checkboxes, like this .
Your is(':checked') IF statement seems wrong as it should be enclosed on an .each() so it applies to all checkboxes, try the more simple approach on the fiddle I linked.

Did you try prop('checked', true); instead of prop('checked', 'checked'); ?
That's what I see in all the examples.

I figured it out. It was Magento issue. Magento doesn't use that form, it uses hidden input and collects selected checkboxes. Will upvote all answers anyway. Thanks

You can use something like :
// custom jQuery added
jQuery(function() {
var to_check = false;
jQuery(".select-all-categories").click(function(){
if (!to_check)
to_check = true;
else
to_check = false;
jQuery("#banner-categories input[type=checkbox]").each(function(){
if (!to_check)
jQuery(this).removeAttr("checked");
else
jQuery(this).attr("checked","checked");
});
return false;
});
});
Code can be optimized

get radio box value in jquery

Am I under the wrong impression that jquery or JS can retrieve the values of radio buttons in a form? The reason i ask is because in my code the script i use to check for all fields in a form, does not seem to recognise the value in id="contact2" in the form, which is a radio group. I have posted my code at jsfiddle.net and would appreciate some feedback as to how I can correct this. Many thanks
Fiddle: http://jsfiddle.net/xGrb9/

You need to do it like this:
$('input:radio[name=bar]:checked').val();
Because of how radio buttons are checked/unchecked and their values are stored. (from the jQuery docs). You also need to make sure that the radio buttons have different IDs, which is a classic gotcha.
Finally, when testing if a radio button has not been selected at all, make sure to test against undefined and not an empty string for compatibility across browsers.
EDIT: looked at your code, and you need to do two things:
1. Change IDs of the buttons, to something like "contact2a" and "contact2b" so they are unique.
2. Change your var customer2 = line to var contact2=$("input[name=contact2]:checked").val();

Change this line:
var contact2=$("#contact2").val();
to:
var contact2=$('input[name="contact2"]:checked').val();
You need the checked because otherwise it finds both inputs.
Also, technically, all IDs should be unique, ie, not used on 2 elements on the page.

You should be able to use .val()
See this: http://api.jquery.com/val/

Both of your radio buttons have the same ID. That doesn't work in HTML. You'll have to refer to the buttons separately and select the one that is checked.

You can simply call
$("[name=contact2]:checked").val()

jqgrid - how do not show edit form if condition not met

Another jqgrid question. On my page i got a select drop down. If nothing is selecting and the user click to add record, the edit form should no popup. I can't seems to find how to do this in google. Here is what I have:
afterShowForm:function(formid) {
if ( ($('#listbox').val()) == "" ) {
alert('Please select an option.');
$('#'+formid, form).hide();
return false;
}
}
The above code is not working. It actually got error - form is not defined. Should I be using afterShowForm or is there a more proper way to do it.
Thanks.

Ok guys. I found a 'solution' but I am not sure if that is the best way to do it (I think it is not :) ) but it gets the job done.
Instead of using formid pass in through the function, I have view source and get the id of the edit form id. For my case the id is #editmodmy_table. So to hide the form from showing, I just use jquery to do it.
$('#editmodmy_table').hide();
Other than that, we have to get rid of the overlay that is attached to the edit form modal as well. Hiding the edit form don't hide the overlay automatically. So we have to do this:
$('.jqmOverlay').hide();
Hope this helps someone.
Please post a better solution to this if any. Thanks.

The error in this code means that the variable 'form' is not defined.
If I understand this correctly that variable is not needed.
To find the form and hide it you could try something like this instead:
$('form#'+formid).hide();