How to switch on and off checkboxes and radio buttons with JQ

Question

I have tried to get this to work but haven't been successful. I am a a real nube with js so please keep that in mind when trying to help me. You'll have to spell it out for me cuz I just don't understand what is happening yet with all this code.

I have two things that I am trying to get working. One is a set of radio buttons. These buttons are a group meaning that only one radio button can be checked. The values that I have for these radio buttons are either 1 or 0 and are coming out of a database.

Here is the problem I am having. I can switch the buttons and change the vals in the db but when json calls the data out of the database, there is no change in the buttons to the user. For example: if I changed button A to true, or checked, the val in the db changes to 1. When that page is viewed from that moment on, button A should reflect that. Also, when the user checks B, the db val is then changed to 0 and the button should reflect that as well.

What I don't understand is how to switch the actual buttons to reflect the values in the database. Here is my code so far:

else if (item.field == "status" && item.value == "1"){
  $("radio#status").attr("checked", "checked");
}

<input type="radio" id="active" name="status" value="1" checked="checked" class="chkbx">
<input type="radio" id="inactive" name="status" value="0" class="chkbx">

Here is my second issue. The checkboxes are exactly the same as the radio buttons with the exception that they are NOT a group. Each checkbox has its own value. Again I am using 0 and 1 but multiple checkboxes can be checked at one time. Here is the code for that as well.

else if (item.field == "rptDly" && item.value == "1"){
  $("checkbox#rptDly").attr("checked", "checked");
}

<input type="checkbox" id="rptDly" name="rptDly" value="1" checked="checked" class="chkbx">
<input type="checkbox" id="rptSum" name="rptSum" value="1" checked="checked" class="chkbx">
<input type="checkbox" id="rptDtl" name="rptDtl" value="1" checked="checked" class="chkbx">

Can someone please guide me? When I put an alert in the js code above, I do get the alert so I know I'm good there but because I don't know js, I'm not able to troubleshoot this any further.

Thanks!

EDIT:

I found the original post that I am duplicating. Here is the post http://stackoverflow.com/questions/558445/dynamically-fill-in-form-values-with-jquery

Answer 1

It seems you have mixed up what happens on the server, and what happens on the client. What is the item object you are refering to?

Also it's tag#id, where you use tag#name in your first code example.

Usually the code you're writing looks a bit like this (depending on serverside language andframework):

<input type="checkbox" id="forreferencinginjavascriptandcss" name="tobesenttotheserver" value="1"<% if someboolean then print " checked=\"checked\"" %>>

Note that the code between <% and %> gets run on the server, before sending anything to the client.

If you want to check/uncheck a radiobutton/checkbox after it's been sent to the browser, you can use jQuery to do it:

$("input#forreferencinginjavascriptandcss").attr("checked", true);

or

$("input#forreferencinginjavascriptandcss").attr("checked", false);

If a checkbox is checked, name=value is sent to the server, and if it's not checked nothing gets sent to the server. If you want to see what gets sent where, I recommend that you google for and download Fiddler2. It's a works as a http proxy and lets you see exacly what gets sent to and from the server.

Answer 2

The syntax that you're using for the jquery selectors is a bit wrong.

Instead of...

$("checkbox#rptDly")

...the syntax for accessing checkboxes is...

$("input:checkbox[name='rptDly']")

But, as the checkboxes each have their own unique id attribute, you could simply use...

$("#rptDly")

Radio buttons are a bit trickier, as they all have the same name or id. These have to be distinguished by the value attribute - will investigate a correct solution for this and get back to you.

Brush up on your JQuery selector syntax on the JQuery documentation website Or buy a good book on the subject

Answer 3

You need to set the "checked" property in javascript to true/false rather than the string "checked".

checked="checked" is an HTML convention for specifying boolean properties. In the javascript DOM this is converted to a true boolean