jquery Frequently Asked Questions

http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_item_using_class_or_id.3F

How do I test whether an element exists?

• You can use the length property of the jQuery collection returned by your selector:

if ( $('#myDiv').length )
  $('#myDiv').show();

Note: It isn't always necessary to test whether an element exists. The following code would show the item if it exists, and do nothing (no errors) if it did not:

$('#myDiv').show();

How do I determine the state of a toggled element?

You can check the state using the :visible or :hidden selectors.

var isVisible = $('#myDiv').is(':visible'); var isHidden = $('#myDiv').is(':hidden');

If you're simply acting on an element based on its visibility, just include ":visible" or ":hidden" in the selector expression. For example:

$('#myDiv:visible').animate({left: '+=200px'}, 'slow');

How do I disable/enable an element?

You can disable/enable an element by setting the 'disabled' attribute to 'disabled' (to disable it) or "" (to enable it). The result of which looks something like this:

 // Disable #x
 $("#x").attr("disabled","disabled");
 // Enable #x
 $("#x").removeAttr("disabled");

You can try an example of enabling/disabling with the following demo:

onetwo

and here's the source code to the demo:

 <select id="x" style="width:200px;">
   <option>one</option>
   <option>two</option>
 </select>
 <input type="button" value="Disable" onclick="$('#x').attr('disabled','disabled')"/>
 <input type="button" value="Enable" onclick="$('#x').removeAttr('disabled')"/>

How do I check/uncheck an input?

You can check/uncheck an element by setting the 'checked' attribute to 'checked' (to check it) or "" (to uncheck it). The result of which looks something like this:

 // Check #x
 $("#c").attr("checked", "checked");
 // Uncheck #x
 $("#c").removeAttr("checked");

You can try an example of checking/unchecking with the following demo:

I'll be checked/unchecked.

and here's the source code to the demo:

 <label><input type="checkbox" id="c"/> I'll be checked/unchecked.</label>
 <input type="button" value="Check" onclick='$("#c").attr("checked","checked")'/>
 <input type="button" value="Uncheck" onclick='$("#c").removeAttr("checked")'/>

How do I get the text value of a selected option?

Select elements typically have two values that you want to access. First there's the value, which is easy:

$("select#myselect").val(); // => 1

Next is getting the textual value of a select. For example, if you had the following select box:

<select id="myselect"> <option value="1">Mr</option> <option value="2">Mrs</option> <option value="3">Ms</option> <option value="4">Dr</option> <option value="5">haseeb</option> </select>

And you wanted to get the string "Mr" if the first option was selected (instead of just "1"). You would do that in the following way:

$("#myselect option:selected").text(); // => "Mr"

You can see this in action in the following demo:

Mr Mrs Ms Dr Prof

and here's the full source code to the demo:

<select id="myselect"> <option value="1">Mr</option> <option value="2">Mrs</option> <option value="3">Ms</option> <option value="4">Dr</option> <option value="5">Prof</option> </select> <input type="button" value="Get Value" onclick="alert($('#myselect').val())"/> <input type="button" value="Get Text Value" onclick="alert($('#myselect option:selected').text()