Выбор jQuery и Radio Button - PullRequest
Новая
       8

Выбор jQuery и Radio Button

0 голосов
/ 22 июля 2011

У меня есть страница ASP.NET, которая собирается использовать элементы управления Html для рендеринга страницы примерно так (извините, программный рендеринг в офисе): 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Radio Buttons</title>
</head>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<body>
<form id="form1" runat="server">
<div>
    Group 1<br />
    <input type="radio" name="Q1" id="rb1" title="Choice 1" value="false" onclick="javascript:ClickEvent(this);" /><br />
    <input type="radio" name="Q1" id="rb2" title="Choice 2" value="true" onclick="javascript:ClickEvent(this);" /><br />
    <input type="radio" name="Q1" id="rb3" title="Choice 3" value="false" onclick="javascript:ClickEvent(this);" /><br />        
    Group 2<br />
    <input type="radio" name="Q2" id="rb4" title="Choice 1" value="false" onclick="javascript:ClickEvent(this);" /><br />
    <input type="radio" name="Q2" id="rb5" title="Choice 2" value="false" onclick="javascript:ClickEvent(this);" /><br />
    <input type="radio" name="Q2" id="rb6" title="Choice 3" value="true" onclick="javascript:ClickEvent(this);" /><br />
</div>
</form>
</body>
</html>
<script type="text/javascript">
function ClickEvent(r) {

}
</script>

Что мне нужно сделать вФункция ClickEvent - это использование jQuery для выбора группы (так называемое имя).Затем, если они выберут неправильный выбор (value = "false"), измените границу переключателя на красный и всегда измените границу правильного ответа на зеленый.Затем отключите группу кнопок.

Что бы я добавил в определение функции для достижения этой цели?У меня очень мало опыта работы с jQuery (о котором я говорил заранее, но мне сказали, что нужно его использовать), но из того, что я прочитал, я думаю, что «каждый» может быть верным путем.Мне также сказали не использовать CSS-классы, просто изменить цвет рамки.Я смог сделать это с помощью постбэков, но они сказали, что это должно быть на стороне клиента.Кто-нибудь может помочь?

ps То, что это ASP.NET, вероятно, не имеет значения.Если вы знаете jQuery, пожалуйста, не стесняйтесь написать ответ.

1 Ответ

0 голосов
/ 22 июля 2011

Попробуйте это (изменили разметку и скрипт, чтобы ненавязчиво связать событие нажатия): 

<div>
Group 1<br />
<input type="radio" name="Q1" id="rb1" title="Choice 1" value="false" /><br />
<input type="radio" name="Q1" id="rb2" title="Choice 2" value="true" /><br />
<input type="radio" name="Q1" id="rb3" title="Choice 3" value="false" /><br />        
Group 2<br />
<input type="radio" name="Q2" id="rb4" title="Choice 1" value="false" /><br />
<input type="radio" name="Q2" id="rb5" title="Choice 2" value="false" /><br />
<input type="radio" name="Q2" id="rb6" title="Choice 3" value="true" /><br />
</div>


<script type="text/javascript"> 
    $(function(){
     $("div :radio").click(ClickEvent);
    });
    function ClickEvent(){
            var el = this;
            var $el = $(el);
            if($el.val() == "false"){
                var all = $("[name='" + $el.attr("name") + "']");
                var correctRadio = all.filter("[value='true']");
                correctRadio.wrap("<span style='border: solid Green 2px'></span>");
                $el.wrap("<span style='border: solid Red 2px'></span>");
                all.prop("disabled", true);
            } 
        }


</script>

Рабочий пример: http://jsfiddle.net/bJx5y/2/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...