美文网首页
JQuery改变单选框的值,及attr()和prop()方法的区

JQuery改变单选框的值,及attr()和prop()方法的区

作者: 前端后台都不精 | 来源:发表于2019-07-19 14:31 被阅读0次

    使用JQuery的attr()方法给单选框添加属性并赋值时,确实可以赋值并改变单选框样式,但用removeAttr()再去移除却移除不掉,结果就是两个单选框都有checked= "checked"属性,导致单选框不改变。最后使用prop()方法解决了这个问题。

    1、问题

    表格中动态单选框
    <!-- Html代码,动态单选框 -->
    <label>
      是<input type="radio" disabled="" value="1" th:name="isResponse+${deviceInfo.deviceId}">
    </label>
     <label>
      否<input type="radio" class="isResponse" disabled="" checked="checked" value="0" th:name="isResponse+${deviceInfo.deviceId}">
    </label>
    
    <!-- Js代码,触发响应状态,需要将另一个的属性做相反改变 -->
    $("#isResponse" + data.deviceId + " [name='isResponse"+ data.deviceId +"'][value='1']").prop('checked',true);
    $("#isResponse" + data.deviceId + " [name='isResponse"+ data.deviceId +"'][value='0']").prop('checked',false);
    
    <!-- Js代码,重置所有单选框为否 -->
    $(":radio[value='1']").prop('checked',false); 
    $(":radio[value='0']").prop('checked',true); 
    

    2、attr()与prop()方法区别

    attr——attribute,prop——property,都是属性的意思,但在实际功能上是有区别的。
    用法简单来说,根据JQuery官方的建议,具有true和false两种状态的属性,如checked、selected、disabled,使用prop()方法,其他则使用attr()方法。
    具体的不同这篇就写的很好,作为参考:https://blog.csdn.net/tel13259437538/article/details/84639431

    相关文章

      网友评论

          本文标题:JQuery改变单选框的值,及attr()和prop()方法的区

          本文链接:https://www.haomeiwen.com/subject/bqdjlctx.html