Question

Why do php form input arrays act funny in jQuery?

Is there any way to overcome this?

Hi, I wrote this code and it works..
Updating a form of 21 radio inputs to emphasize the label next to the checked radio(s).

*visually – not as in the a html tag

$(function()
{       
for(count = 0;count<21;count++)
{
    result = $("input:radio[name=choice"+count+"]:checked").val();
    $("input[name=\"choice"+count+"\"][ value=\""+ result +"\"]").attr("class", "magic");
    $("div.radio:has(input.magic)").attr("class", "radio spell");   
}
$("input").click(function()
{
    $("div.radio:has(input.magic)").attr("class", "radio");
    $("input.magic").removeAttr("class", "magic");

    var count = 0;
    var result = 0;
    for(count = 0;count<21;count++)
    {
        result = $("input:radio[name=choice"+count+"]:checked").val();
        $("input[name=\"choice"+count+"\"][ value=\""+ result +"\"]").attr("class", "magic");
        $("div.radio:has(input.magic)").attr("class", "radio spell");   
    }
});
});

Here is the css

input[type="radio"] {
height: 20px;
}

input[type="radio"] + label {
color: #777;
font-weight:100;
letter-spacing: 1px;
}

input[type="radio"].magic + label {
color: black;
font-style: italic;
/*text-decoration:underline;*/
font-weight: 600;
letter-spacing: 0px;
text-align: center;
display:inline-block;
width: 80px;
}

div.radio.spell {
border: outset white 2px;
}

Now the radio names used are choice0 – choice20
And it works ok.

Before that I used choice[0] – choice[20]
And it did not work at all.
It behaved very weird.

The jQuery code was something like:
result = $(“input:radio[name=choice[“+count+”]]:checked”).val(); …

I am wondering, is there anyway around that?

Thank you for any valuable input.

Answer 1

[ and ] are used for attribute selectors in jQuery, you need to escape them to use them as part of a string: $(":radio[name=choice\["+count+"\]]").

That said, this is a rather uncomfortable way of manipulating element groups. The easy way is to create a HTML structure which reflects those groups, and use that to find other members of a group:

$(function() {
    $(":radio[name^=choice]:checked").each(function() {
        $(this).closest('div.radio').attr("class", "radio spell")
            .find("input[name^=choice]").attr("class", "magic");
    });
});

etc.