Javascript:验证 ASP.NET 中动态创建的单选按钮列表控件

发布于 2024-07-22 06:46:17 字数 1458 浏览 3 评论 0原文

我有一个 ASPX 页面,在页面加载中我动态创建一些单选按钮列表控件并呈现到浏览器。每个单选按钮列表中将有 2 个列表项。一个是“是”,第二个是“否”。单选按钮列表的数量可以现在在我的java脚本代码中,我想知道单击了哪个单选按钮。 我已经在使用 jQuery。有什么简单的方法来处理这个问题吗?

我的 HTML 呈现给浏览器是

<table border="0" id="tblQuestions">
    <tr>
        <td>Do you have a valid passport ?</td>
    </tr><tr>
        <td><table id="answer-1" border="0">
            <tr>
                <td><input id="answer-1_0" type="radio" name="answer-1" value="1" /><label for="answer-1_0">Yes</label></td>
            </tr><tr>
                <td><input id="answer-1_1" type="radio" name="answer-1" value="0" /><label for="answer-1_1">No</label></td>
            </tr>
        </table></td>
    </tr><tr>
        <td>Are you married ?</td>
    </tr><tr>
        <td><table id="answer-2" border="0">
            <tr>
                <td><input id="answer-2_0" type="radio" name="answer-2" value="1" /><label for="answer-2_0">Yes</label></td>
            </tr><tr>
                <td><input id="answer-2_1" type="radio" name="answer-2" value="0" /><label for="answer-2_1">No</label></td>
            </tr>
        </table></td>
    </tr>
</table>

提前感谢

I have an ASPX page where in the page load i am dynamically creating some radio button list controls and rendering to browser.I will have 2 list items in each radio button list .One is Yes and second is No. The number of Radio buttonlist can be n.Now in my java script code, i want to know which radio button is clicked . I m already using jQuery .any easy way to handle this ?

My HTML rendered to browser is

<table border="0" id="tblQuestions">
    <tr>
        <td>Do you have a valid passport ?</td>
    </tr><tr>
        <td><table id="answer-1" border="0">
            <tr>
                <td><input id="answer-1_0" type="radio" name="answer-1" value="1" /><label for="answer-1_0">Yes</label></td>
            </tr><tr>
                <td><input id="answer-1_1" type="radio" name="answer-1" value="0" /><label for="answer-1_1">No</label></td>
            </tr>
        </table></td>
    </tr><tr>
        <td>Are you married ?</td>
    </tr><tr>
        <td><table id="answer-2" border="0">
            <tr>
                <td><input id="answer-2_0" type="radio" name="answer-2" value="1" /><label for="answer-2_0">Yes</label></td>
            </tr><tr>
                <td><input id="answer-2_1" type="radio" name="answer-2" value="0" /><label for="answer-2_1">No</label></td>
            </tr>
        </table></td>
    </tr>
</table>

Thanks in advance

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

生来就爱笑 2024-07-29 06:46:17

以下代码并没有具体回答您的问题,但可能会有所帮助。 我会为你修改它,但我现在没有时间。

我在考试中使用它来警告用户特定问题没有选定的答案。

问题是使用发出纯 xhtml 的服务器控件动态生成的。 我用相同的名称命名所有选项(Q1,Q2 ...),并将它们标识为(Q1a,Q1b ...)

要根据您的目的对其进行修改,也许您可​​以在 j 循环中构建选定选项的列表,即在“break”语句所在的位置添加名称-值对。

// Grabs all inputs - radio, checkbox, text, buttons and lists -sticks them in an array
allInputs = document.getElementsByTagName("input");
var last = "NameUnlikelyToBeUsedAsAnElementName";

// walk through the array
for (i = 0; i< allInputs.length; i++)
{
    var input = allInputs[i];
    if (input.name == last) continue; // if this object name is the same as the last checked radio, go to next iteration


    // checks to see if any  one of  similarly named radiobuttons is checked 
    else if (input.type == "radio" )
    {    
        last = input.name;  
        var radios = document.getElementsByName(input.name);
        var radioSelected=false;

         //iterate over question options
        for (j=0; j < radios.length; j++)
        {
            if(radios[j].checked)
            {
               radioSelected=true;
               break; // Found it, proceed to next question 
            }
        }
        if (!radioSelected) // no option selected
        {       // warn user, focus question
            alert("You did not answer question " + input.id.substring(0,input.id.length-1));
            input.focus();
            return false;
        }                   
    }

}

return true;

The following code doesn't specifically answer your question, but it might help. I'd modify it for you, but I just don't have the time right now.

I use this on exams, to warn the user that a particular question doesn't have a selected answer.

The questions are generated dynamically using a Server control which emits plain xhtml. I name all options with the same name, (Q1, Q2...), and ID them like (Q1a, Q1b ...)

To modify it for your purposes, perhaps you could build a list of selected options in the j loop, that is, adding name -value pairs where the "break" statement is.

// Grabs all inputs - radio, checkbox, text, buttons and lists -sticks them in an array
allInputs = document.getElementsByTagName("input");
var last = "NameUnlikelyToBeUsedAsAnElementName";

// walk through the array
for (i = 0; i< allInputs.length; i++)
{
    var input = allInputs[i];
    if (input.name == last) continue; // if this object name is the same as the last checked radio, go to next iteration


    // checks to see if any  one of  similarly named radiobuttons is checked 
    else if (input.type == "radio" )
    {    
        last = input.name;  
        var radios = document.getElementsByName(input.name);
        var radioSelected=false;

         //iterate over question options
        for (j=0; j < radios.length; j++)
        {
            if(radios[j].checked)
            {
               radioSelected=true;
               break; // Found it, proceed to next question 
            }
        }
        if (!radioSelected) // no option selected
        {       // warn user, focus question
            alert("You did not answer question " + input.id.substring(0,input.id.length-1));
            input.focus();
            return false;
        }                   
    }

}

return true;
凯凯我们等你回来 2024-07-29 06:46:17

这是假设您的页面中已经包含 jquery。

在单选按钮项上定义一个类,基本上您的客户端 HTML 应该类似于

现在,在您的 js 代码中,只需在类上连接一个事件处理程序,

$(".myrdo").bind("click",function(){if($(this).attr("checked")==true) {alert($(this).val);} });

上面的命令将简单地提醒所选单选按钮的值。

This is with the assumption that you already have jquery included in your page.

define a class on your radio button items, basically your client side HTML should look like <input id="answer-2_1" type="radio" name="answer-2" value="0" class="myrdo" />

now, in your js code, simply wire up an event handler on the class

$(".myrdo").bind("click",function(){if($(this).attr("checked")==true) {alert($(this).val);} });

the above command will simply alert the value of the selected radio button.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文