jQuery 不响应单选检查

Posted

技术标签:

【中文标题】jQuery 不响应单选检查【英文标题】:jQuery does not respond to radio checked 【发布时间】:2012-06-28 22:58:21 【问题描述】:

当我检查收音机时,我希望在 jQuery 中出现一个框,但我没有标记并且没有任何反应。

这里是代码。

html

<script src="https://sites.google.com/site/lightdownloads154/jquery.alerts.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://sites.google.com/site/lightdownloads154/jquery.alerts.css" type="text/css" />

<center><textarea rows="10" cols="17" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" wrap="soft">- Todos os links e arquivos que se encontram no blog, estão hospedados na própria Internet, somente indicamos onde se encontra.

- Qualquer arquivo protegido por algum tipo de lei deve permanecer, no máximo, 24 horas em seu computador.

- Eles podem ser baixados apenas para teste, devendo o usuário apagá-lo ou compra-lo após 24 horas.

- A aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

- Os donos, webmasters e qualquer outra pessoa que tenha relacionamento com a produção do blog não tem responsabilidade alguma sobre os arquivos que o usuário venha a baixar e para que ira utiliza-los.
</textarea><center>
<center>
<input name="accept" type="radio" id="accept" /> Eu aceito <input name="refuse" type="radio" id="refuse" /> Não aceito </center></center>
</center>

​ JavaScript:

  $(document).ready(function() 

      $("#accept").click(function() 
          jAlert($('input[name=accept]:checked').attr('Obrigado por aceitar os Termos.'));
      );

      $("#refuse").click(function() 
          jAlert('refuse', 'Se não aceita os termos de uso retire-se do blog.', 'Termos de uso');
      );
  );

​ Demo

【问题讨论】:

您还没有关闭准备好的事件处理程序。试试this。 您的收音机必须具有相同的名称,但不同的值才能工作 - jsfiddle.net/XkBSv/10 关闭 document.ready 和 jAlert 是什么? @Juhana :他在小提琴第一行中包含的插件。 【参考方案1】:

这基本上修复了您的代码:http://jsfiddle.net/XkBSv/7/

jAlert 未在您的脚本中定义,您可能没有为此添加外部脚本。 jAlert 导致语法错误。 您没有关闭您的就绪事件,导致语法错误。

您可能还想将输入名称更改为相同的值,以便它们实际上可以充当单选按钮。

更新

jAlert 中的语法错误可能是因为它在闭包之前没有 ;,如果我在您的代码之前添加代码而不是 html 中的链接,它确实有效!

见http://jsfiddle.net/XkBSv/13/

【讨论】:

这不是我想要的,我需要 jQuery 中的警报,我会告诉你我在哪里得到了警告的代码,但我不能在收音机上安装它。 jQuery Alert 代码:[点击这里][1] [1]:abeautifulsite.net/blog/2008/12/jquery-alert-dialogs【参考方案2】:

    Google 正在将对这些文件的请求重定向到 HTML 文件,这就是您收到错误消息的原因:uncaught SyntaxError: Unexpected token &lt; 或在此之后没有遇到任何 JavaScript 执行。

    https://sites.google.com/site/lightdownloads154/jquery.alerts.js https://sites.google.com/site/lightdownloads154/jquery.alerts.css

    使用以下内容:

    http://labs.abeautifulsite.net/archived/jquery-alerts/demo/jquery.alerts.js http://labs.abeautifulsite.net/archived/jquery-alerts/demo/jquery.alerts.css

    这一行什么都不做:

    $('input[name=accept]:checked').attr('Obrigado por aceitar os Termos.')

    jQuery 正在寻找一个名为 Obrigado por ... 的属性,因为它不存在所以什么都不返回。

    您需要将具有相同名称属性的单选按钮分组并使用值属性进行区分。

演示:http://jsfiddle.net/iambriansreed/MXZJJ/

【讨论】:

在这个例子中我会改变消息和AlertBox的标题吗? 我不确定会发生什么。如果有帮助,记得接受答案。 对我帮助很大,但我需要更改标题并且消息在 AlertBox 中 :( @NetoMello 为此请阅读文档:abeautifulsite.net/blog/2008/12/jquery-alert-dialogs 请接受并投票。谢谢!【参考方案3】:

试试这个:

    <!DOCTYPE html>
        <html>
        <head>
            <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
            <link href="http://labs.abeautifulsite.net/archived/jquery-alerts/demo/jquery.alerts.css" rel="stylesheet" type="text/css"/>

            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
            <script src="http://labs.abeautifulsite.net/archived/jquery-alerts/demo/jquery.alerts.js"></script>

            <script>
                $(document).ready(function() 

                    $("#accept").change(function() 
                        if($(this).attr("checked"))
                            jAlert('This is a custom alert box', 'Radio accept selected');
                        

                    );

                    $("#refuse").change(function() 
                        if($(this).attr("checked"))
                            jAlert('This is a custom alert box', 'Radio refuse selected');

                        

                    );


                );

            </script>
        </head>
        <body style="font-size:62.5%;">

        <input  type="radio" name = "radioGroup" id="accept" value="accepted" /> Accepted
<input  type="radio" name = "radioGroup" id="refuse" value="rejected" /> Not Accepted </center></center>


        </body>
        </html>

【讨论】:

$(this).attr("checked") 不是检查是否检查的正确方法。 $(this).prop("checked") 是最可靠的方法。 @Neto Mello 我已经为您编辑了上面的代码,并为单选按钮添加了名称属性。如果您有多个单选按钮并且希望一次只选择一个,则必须为单选按钮的名称属性分配一个值,并且该组单选按钮的值必须相同。 给继续选择两个。 @NetoMello 你更新了这一行: 接受 不接受 仔细检查您的单选按钮上没有两个“名称”属性。应该只有一个名称属性。此代码 100% 有效。 @NetoMello 我的正确答案是-1反对它,你从来没有接受过正确的答案。我花时间帮助您解决问题,您通过摆脱 -1 并接受正确答案来帮助我,以便它对我们双方都有效。干杯:)

以上是关于jQuery 不响应单选检查的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Ajax Json 响应 - 检查是不是为空

如何在 jQuery 中重置单选按钮以便不检查任何单选按钮

jquery:重置后禁用/启用按钮不起作用

Material-UI中的单选按钮和复选框不响应单击或点击

角度材料单选按钮默认选中不验证表单

为啥 jquery 数据表不响应点击?