单选按钮不使用 jquery 更新答案

【问题标题】：Radio buttons not updating with jquery单选按钮不使用 jquery 更新
【发布时间】：2017-06-03 03:01:29
【问题描述】：

我的代码中有单选按钮，并希望它们在状态更改时像网页上的其他变量一样更新

HTML

<TD><Input id="radOn2" name="Nb_var86" type= "radio" Value=1 onClick="this.form.submit();">ON</TD>
<TD><Input id="radOff2" name="Nb_var86" type= "radio" Value=0 onClick="this.form.submit();">OFF</TD>

JavaScript

var timeout;
function bloop() {

    $.ajax({
        url: "/ajax.html",
        success:function(result){
            var array=result.split(','); 
            for(i=0;i<array.length;i++){
                $("input[name='Nb_var"+array[i].substring(0,array[i].indexOf(':'))+"']").val(array[i].substring(array[i].indexOf(':')+1));
            }
        }
    });

    timeout = window.setTimeout(function(){bloop()}, 4000);
}

对于我的一生，我无法弄清楚为什么单选按钮不会更新。任何帮助表示赞赏。

我尝试了堆栈溢出中的其他示例，但它们似乎不起作用。我的 bloop 函数会更新网页上的变量列表，但除非您刷新页面，否则单选按钮（列表中的变量）不会更新。我想让 jquery 更新单选按钮状态而不刷新页面

这是我尝试过的：我可以在页面上看到 var，所以我知道服务器和 ajax 正在更新 var：

<TD><Input id="radOn2" name="Nb_var86" type= "radio" Value=1 onClick="this.form.submit();">ON</TD>
<TD><Input id="radOff2" name="Nb_var86" type= "radio" Value=0 onClick="this.form.submit();">OFF<input readonly name= "Nb_var86"style="font-size: 105%;border:none;" value ="<Nb_var86>" size = 2></TD>

然后在脚本中我尝试了所有这些，但实际上翻转单选按钮没有运气：

if($("input[name=Nb_var86]:checked").val()==1){
    $('input:radio[name=Nb_var86][id=radon2]').click();
    //$("#radon2").prop("checked", "checked");
    //$('input:radio[name = Nb_var86]').val(['radon2']);
    //$('#radon2').attr('checked', 'checked');
    //$("input[name = Nb_var86] [id = radon2]").prop('checked', true);
    //$("#radoff2").prop("checked", false).val()==0;
    //$("#radon2").prop("checked", true).val()==1;

我错过了什么吗？

【问题讨论】：

与问题无关，但对于 HTML 标签 (<TD> / <Input>) 和属性 (Value / onClick) 使用小写字母是惯例
你不想改变它的值，而是它是否被选中。
jQuery set radio button的可能重复

标签： jquery html ajax

【解决方案1】：

这是一个线程的链接，其中有很多选项供您尝试。你不想改变它的值，而是它是否被选中。

jQuery set radio button

我个人喜欢 prop 选项，像这样

jQuery('[value="radio2"]').prop('checked', true)

这是prop http://api.jquery.com/prop/ 的文档

【讨论】：

【解决方案2】：

使用道具？

$("#radOn2").prop("checked",true);

等等……

我想你也需要 setInterval 来解决这个问题...

var timeout;
function bloop() 
    $.ajax({
        url: "/ajax.html",
        success:function(result){
            var array=result.split(','); 
            for(i=0;i<array.length;i++){
                var arr = array[i];
                var num = arr.substring(0, arr.indexOf(':'));
                $("input[name='Nb_var"+num+"']").val(num+1).prop("checked",true));
            }
        }
    });
}

timeout = setInterval(function(){ bloop(); }, 4000);

我在这里用小提琴测试了这个： https://jsfiddle.net/k4zLvgyr/7/

fiddle 没有 AJAX，但它只是简单地打开和关闭收音机...... 让我知道这是否有帮助。

【讨论】：

我已经尝试了 $("#radOn2").prop("checked",true);通过将其放入 bloop 函数来路由，不起作用。放那个地方合适吗？
您是否要检测收音机的变化？我想弄清楚你是如何调用 bloop() 函数的？您的超时设置为在 bloop() 函数中重复，因此您需要先对其进行初始化。如果您只是想根据收音机的变化来触发某些东西，还有其他方法。让我知道...
bloop 函数每 5 秒调用一次，首先从 onPageLoad 调用并更新网页上的变量列表，例如来自微控制器的生动提要。当微控制器中的变量更新时，/ajax.html 文件中的其他变量也会更新。如果您打开 index.html 的第二个实例并更改一个单选按钮，它不会在第一个实例上自动更新，它只会在您刷新页面时更新。
Skippy，我已经能够看到 ajax 何时更改 Nb_var86（1 或 0）并尝试了以下操作：code if($("input[name=Nb_var86] :checked").val()==1){ $('input:radio[name=Nb_var86][id=radon2]').click(); //$("#radon2").prop("checked", "checked"); //$('input:radio[name = Nb_var86]').val(['radon2']); //$('#radon2').attr('checked', 'checked'); //$("input[name = Nb_var86] [id = radon2]").prop('checked', true); //$("#radoff2").prop("checked", false).val()==0; //$("#radon2").prop("checked", true).val()==1; }code
您是否尝试将值从 1 切换为 0 并正确显示选中的收音机？看起来您正在尝试在将元素插入 DOM 后使用 .click() 函数单击该元素。这可能无法正常工作。您最好简单地预设元素，例如 if($("input[name='Nb_var86']").is(":checked")){ ... 在此处切换值 ... }

【解决方案3】：

你可以使用 props 或 attr 或 val。

这里是例子：

<!DOCTYPE html>
<html>
<body>

    <input id="radOn2" name="Nb_var86" type= "radio" value=1 onClick=""/>ON
    <input id="radOff2" name="Nb_var86" type= "radio" value=0 onClick=""/>OFF

   <p>Click in the button.</p>

   <button onclick="fn()">Try it</button>

   <script src="http://code.jquery.com/jquery-3.1.1.min.js">
   </script>
   <script type="text/javascript">
       function fn() {
           $("input[name=Nb_var86][value=1]").attr('checked', 'checked');
           $("input[name=Nb_var86][value=0]").prop('checked',true);
           $("input[name=Nb_var86]").val([1,0]); //With an array
           $("input[name=Nb_var86]").val([0,1]);
       }
   </script>
</body>
</html>

【讨论】：