Develop Reference

Greasemonkey script seems to execute lines out of order

Given the following HTML:
<table class="cat_list">
<tr>
<td>
<input type="checkbox" name="filter_cat[1]" id="cat_1" value="1"/>
<label for="cat_1">Music</label>
</td>
<td>
<input type="checkbox" name="filter_cat[2]" id="cat_2" value="1"/>
<label for="cat_2">Applications</label>
</td>
<td>
<input type="checkbox" name="filter_cat[3]" id="cat_3" value="1"/>
<label for="cat_3">E-Books</label>
</td>
<td>
<input type="checkbox" name="filter_cat[4]" id="cat_4" value="1"/>
<label for="cat_4">Audiobooks</label>
</td>
<td>
<input type="checkbox" name="filter_cat[5]" id="cat_5" value="1"/>
<label for="cat_5">E-Learning Videos</label>
</td>
<td>
<input type="checkbox" name="filter_cat[6]" id="cat_6" value="1"/>
<label for="cat_6">Magazines</label>
</td>
<td>
<input type="checkbox" name="filter_cat[7]" id="cat_7" value="1"/>
<label for="cat_7">Comics</label>
</td>
</tr>
The following script should uncheck all checkboxes in the table row, then check the one specific one with id cat_1.
$(".cat_list input[type='checkbox']").attr("checked",false);
$("#cat_1").attr("checked",true);
In Greasemonkey, it checks the one box for a millisecond then just unchecks all boxes. The second command alone DOES check the cat_1 box when executed alone, but when you add the line above it, they all get unchecked after...
So, is Greasemonkey executing things incorrectly or what? it looks like it's running the script backwards or there's a timing issue, like it's starting the unchecks async then finishing the check before the uncheck can finish.

It may be that your script's jQuery and the page are conflicting. A simple #grant GM_addStyle may ix it. Post your complete script.
Otherwise, that jQuery code operates synchronously. The page's javascript is interfering with what you are trying to do, or something key was omitted from the question.
Possibly, your script is firing before the page is done setting itself up. Link to the actual target page if you can.
Analyze the page's javascript that acts on those inputs, and consider using the page's own JS to make the changes. The page may need/expect states to be set, not just checkboxes toggled.
Use the page's JS via script injection or via unsafeWindow.
Using a timer, like in psyjoniz's answer, might be sufficient. Might not. But, it's easy enough to try. I'd use a longer interval though:
$(".cat_list input[type='checkbox']").attr ("checked", false);
//-- Give the page's JS time to react and settle.
setTimeout ( function () { $("#cat_1").attr ("checked", true); }, 100);

Try this ..
setTimeout(function(){$("#cat_1").attr("checked",true);},0);
If it is a race condition of some kind this will put your command at the bottom of the stack.

How to change running site content with JavaScript?

Assume that, there are many checkboxes in any site and they are unchecked. Site works in any server. I have not site code. I want to make checked some of those checkboxes. To find checkboxes by value of <td> Can I do this with JavaScript? How can I run JavaScript code in that site code? My aim is to show checkboxes as "checked".
<tr>
<td id ="id1" name"name1">value1</td>
<td><input id="checkid1" name="checkname1" type="checkbox" value="false"></td>
</tr>
<tr>
<td id ="id2" name"name2">value2</td>
<td><input id="checkid2" name="checkname2" type="checkbox" value="false"></td>
</tr>
<tr>
<td id ="id3" name"name3">value3</td>
<td><input id="checkid3" name="checkname3" type="checkbox" value="false"></td>
</tr>
If it is possible, I want to enter, value1, value2 and JavaScript will make checked related checkboxes.

You can achieve this with JQuery.
Check if a checkbox is checked and than set checked true for the desired other checkboxes.
http://jquery-howto.blogspot.be/2008/12/how-to-check-if-checkbox-is-checked.html
To search by value you can do something like this:
$("input:checkbox[value=val]").attr("checked", true);

Can I select only the text/label from this code and wrap a tag around it?

Okay, so I am dealing with a CMS system here which generated wonderful (not) code. I cannot change the way the code/content is generated, but I can add my own JavaScript / jQuery code to rewrite the generated content. I am looking at a form which looks like this ...
<table>
<tr>
<td>
First Name<br><input id="first_name_field" name="first_name" value="" type="text">
</td>
</tr>
<tr>
<td>
State/Province/Region<br><div id="regstatediv_187"><select name="state" id="state_field" class="inputbox"><option value=" ">Select State/Province/Region</option><option value="ALA">Alabama</option>...</select></div>
</td>
</tr>
</table>
I have been playing with the html() and text() functions in jQuery and thus far cannot find a way to select only the text "label" and then wrap it and write it back without destroying the form field in the process. Any suggestions?
Thanks!

Try this
$('table td').contents().filter(function() {
return this.nodeType == 3;
}).wrap('<span class="label" />');//use any markup you want to wrap with
Demo

Hiding empty inputs by parent row in jquery

I have the following HTML:
<table>
<tr class="row">
<td class="field">
<input type="text" />
</td>
<td class="field">
<input type="text" />
</td>
<td class="field">
<input type="text" />
</td>
</tr>
<tr>
...
...
</tr>
</table>
I want to be able to hide the <tr> with the class="row" but only when the input within the <td> with the class="field" is empty when the page loads.
I've tried this, but it doesn't work:
$('td.field:text[value=""]').parents('tr.row').hide();
However, for some reason, this DOES work:
$('td.field).parents('tr.row').hide();
(ie: it hides all of the rows with class="row")
Also, the following DOES work:
$('td.field:text[value=""]').val('test');
(ie: all empty inputs are populated with 'test' on page load)
I'm new to JQuery so I'm suspecting that I may have just misunderstood the way chaining works. can anyone give me any pointers? It semms like the two parts of what I am trying to do are correct when attempted separately, but don't work together as one.

I think it should be in this way:
$('td.field :text[value=""]').parents('tr.row').hide();
The reason: :text (input) is child from td.field. If you put td.field:text it's wrong because they are diferente selectors.

and why dont you go the oposite way - select the INPUT with empty value, and than go to its
parents().parents().hide()
first parents to get TD, the second one to get TR

Get respective value which is checked by chk Box in HTML Table

As I have generated HTML Table (Asp.net Table),
now I need the value of the Cell One when that respective checkBox is checked.
Suppose the second check box is clicked I need the value of the second row
E.g. if month 2 is clicked I need the value 553.5000
USING JAVA SCRIPT.
As well as the total of the same..
Total of the check value..
<table border="2" id="ctl00_ctl00_B_A_ucStudentRegistration1_TblTotalPay">
<tbody><tr>
<td class="caption">Total Amount</td><td class="caption">Paid Fees</td>
</tr><tr style="border-width: 3px; border-style: solid;">
<td>5889.2400</td><td><span disabled="disabled"><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" disabled="disabled" checked="checked" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth1" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth1"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth1">Month1</label></span></td>
</tr><tr>
<td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth2" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth2"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth2">Month2</label></td>
</tr><tr>
<td>885.6000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth3" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth3"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth3">Month3</label></td>
</tr><tr>
<td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth4" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth4"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth4">Month4</label></td>
</tr><tr>
<td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth5" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth5"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth5">Month5</label></td>
</tr><tr>
<td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth6" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth6"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth6">Month6</label></td>
</tr><tr>
<td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth7" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth7"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth7">Month7</label></td>
</tr>
</tbody></table>

Your question doesn't disclose what you're really after and doesn't provide a dev-friendly example, but let's try anyway, shall we?
Check out the Working Demo (open the console).
Here's the JS for your convenience
$('.TotalPay input[type=checkbox]').change(function(){
var amount = $(this).parent().siblings().text();
console.log(amount);
});
Using JavaScript, we can bind event handlers to DOM elements from outside the markup, thus leaving the HTML clean and semantic. onXXXXX attributes might work, but you should really read about Unobtrusive JS.
In my example I chose jQuery, which greatly simplifies tedious tasks like DOM traversal. Basically, here's what this snippet do:
Grab the relevant checkboxes by CSS selector,
attach an anonymous handler to their 'change' event.
in it, traverse for the checkbox's 'uncle' and store its text in the amount variable
p.s. Please use semantic classnames for your elements. .net screws up your IDs, so IMO just rely more heavily on classes.
Also, "jQuery is great, learn JavaScript first"™.