Greasemonkey script seems to execute lines out of order

Question

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.

Answer 1

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);

Answer 2

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.