Почему массивы php-форм ведут себя странно / (неожиданно) в jQuery

Question

Почему массивы ввода php-форм выглядят забавно в jQuery?

Есть ли способ преодолеть это?

Привет, я написал этот код, и он работает .. Обновление формы 21радиовходы для подчеркивают метку рядом с отмеченными радиоканалами.

* визуально - не так, как в теге html

$(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");   
    }
});
});

Вот 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;
}

Теперь используются имена радиостанций choice0 - choice20 И все работает нормально.

До этого я использовал choice [0] - choice [20] И он вообще не работал.Он вел себя очень странно.

Код jQuery был что-то вроде: result = $ ("input: radio [name = choice [" + count + "]]: флажок"). Val ();...

Мне интересно, есть ли что-нибудь вокруг этого?

Спасибо за любой ценный вклад.

Answer 1

[ и ] используются для селекторов атрибутов в jQuery, вам нужно экранировать их, чтобы использовать их как часть строки: $(":radio[name=choice\["+count+"\]]").

Тем не менее, это довольно неудобный способ манипулирования группами элементов. Самый простой способ - создать структуру HTML, которая отражает эти группы, и использовать ее для поиска других членов группы:

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

и т.д.