奥门巴黎人手机网址【app】

科技世界20170420所丧命题及缓和情势-1.有关接受jquery对input中type为radio的竹签checked属性的加多与移除,jquerychecked

2019-10-26 16:07·澳门巴黎人手机版

20170420所丧命题及缓和办法-1.有关采纳jquery对input中type为radio的标签checked属性的加码与移除,jquerychecked

供给:对radio的checked属性先解除然后进行双重设置;

 

始于方案:

$("auForm input :radio[value='0']").removeAttr('checked');
$("auForm input :radio[value='1']").removeAttr('checked');

if(l.isover==0) $("auForm input :radio[value='0']").attr('checked','true');
if(l.isover==1) $("auForm input :radio[value='1']").attr('checked','true');

 

事实上难题:在使用removeAttr()移除了radio的checked属性后,使用attr()重新充实不起功效;

缓慢解决格局:

$("#auForm input:radio[value='1']").removeAttr('checked');
$("#auForm input:radio[value='0']").removeAttr('checked');

if(l.isover==1) $("#auForm input:radio[value='1']").prop('checked','true');
if(l.isover==0) $("#auForm input:radio[value='0']").prop('checked','true');

即利用prop()可重新配置上该属性;

为此去查了须臾间有关jquery中有关attr()和prop()的利用:

从 jQuery 1.6 开头新添了叁个方法 prop(),因为在 jQuery 1.6 在此以前,使用 attr() 有的时候候会并发不相像的行事。

基于官方的建议:科技世界,怀有 true 和 false 两脾性格的性质,如 checked, selected 也许 disabled 使用prop(),其余的选用 attr(),

端详可参照他事他说加以考察该博客:

 

 

 

  

 

必要:对radio的checked属性先消亡然后...

即采纳代码如下:

当该办法用于安装属性值,则为相称成分设置二个或五个天性/值对。

我们都精晓某些浏览器只要写disabled,checked就能够了,而有的要写成disabled

"disabled",checked="checked",举例用attr("checked")获取checkbox的checked属性时相中的时候能够取到值,值为"checked"但没选中获取值就是undefined。

jq提供新的艺术“prop”来赢得这一个属性,便是来化解那些标题标,从前笔者们应用attr获取checked属性时再次回到"checked"和"",未来应用prop方法得到属性则统大器晚成重回true和false。

那就是说,几时利用attr(),何时使用prop()?

1.增加属性名称该属性就能够卓有功能应该利用prop();

2.是有true,false两性情子使用prop();

3.别样则动用attr();

品类中jquery晋级的时候我们要小心这一点!

以下是法定提议attr(),prop()的应用:

Attribute/Property .attr() .prop()
accesskey
align
async
autofocus
checked
class
contenteditable
draggable
href
id
label
location ( i.e. window.location )
multiple
readOnly
rel
selected
src
tabindex
title
type
width ( if needed over .width())

上述那篇浅谈jQuery中的checkbox难点正是笔者分享给大家的全体内容了,希望能给咱们三个参照,也盼望大家多多照拂脚本之家。

如今项目回归使用jquery,页面渲染全是利用jquery做的,所以做的时候也蒙受了成千上万早前未有见过的主题材料,如本次操作【radio】控件的"checked"属性时有碰到难点,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<script type="text/javascript">
  function checkAll(name) {
    var el = document.getElementsByTagName('input');
    var len = el.length;
    for(var i=0; i<len; i++) {
      if((el[i].type=="checkbox") && (el[i].name==name)) {
        el[i].checked = true;
      }
    }
  }
  function clearAll(name) {
    var el = document.getElementsByTagName('input');
    var len = el.length;
    for(var i=0; i<len; i++) {
      if((el[i].type=="checkbox") && (el[i].name==name)) {
        el[i].checked = false;
      }
    }
  }
</script>
<input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 字母全选开关
<input type="checkbox" name="test" value="a" /> a
<input type="checkbox" name="test" value="b" /> b
<input type="checkbox" name="test" value="c" /> c
<input type="checkbox" name="test" value="d" /> d
<input type="checkbox" name="test" value="e" /> e
<input type="checkbox" name="test" value="f" /> f
<input type="checkbox" name="test" value="g" /> g
<br>
<input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }" /> 数字全选开关 <input type="checkbox" name="num" value="1" /> 1
<input type="checkbox" name="num" value="2" /> 2
<input type="checkbox" name="num" value="3" /> 3
<br><br>
<input type="button" value="选择所有的字母" onclick="checkAll('test')" /> <input type="button" value="清空选中的字母" onclick="clearAll('test')" /> <br><br>
<input type="button" value="选择所有的数字" onclick="checkAll('num')" /> <input type="button" value="清空选中的数字" onclick="clearAll('num')" />
</body>
</html>

prop():

交由使用jQuery事先的全选和全不选:

假设有料理的脾气,再次来到的是该属性,如果未有则重返undefined

您可能感兴趣的稿子:

  • 浅谈jquery设置和获取checkbox选中的难题
  • jquery checkbox不可能用attr()三遍勾选难题的减轻格局
  • 浅析jquery与checkbox的checked属性的难题
  • jquery checkbox 勾选的bug难题一举成功方案与深入分析
  • 解决jquery操作checkbox火狐下第叁遍不可能勾选难点
  • Jquery 获取checkbox的checked问题
  • jQuery1.9.1对准checkbox的调动措施(prop)
  • JQuery触发radio或checkbox的change事件
  • jQuery判定checkbox是不是选中的3种办法
  • jquery推断checkbox(复选框)是还是不是被选中的代码
  • jQuery checkbox选中难题之prop与attr注意点分析

你也许感兴趣的作品:

  • Jquery中attr与prop的不同详解
  • jQuery获取attr()与prop()属性值的办法及界别介绍
  • jQuery中attr()与prop()函数用法实例详解(附用法分别)
  • jquery决断复选框选中状态以至界别attr和prop
  • jQuery中 prop() attr()使用详解
  • jquery中attr和prop的区分深入分析
  • jQuery中attr()和prop()在修正checked属性时的界别
  • jQuery学习之prop和attr的分别示例介绍
  • jquery中prop()方法和attr()方法的分裂浅析
  • jquery获取自定义属性(attr和prop)实例介绍
  • jquery 获取自定义属性(attr和prop)的落到实处代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>复选框</title>
  <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript">
  $(function() {
    $("#all").click(function () {
      if (this.checked) {
        $("#list :checkbox").each(function () {
          $(this).attr("checked", true);  //选择器要有空格隔开
        })
      } else {
        $("#list :checkbox").each(function () {
          $(this).attr("checked", false);
        })
      }

    });
  })
</script>
</head>
<body>
<ul id="list">
  <li><label><input type="checkbox" value="1">广东省 </label></li>
  <li><label><input type="checkbox" value="2">广西省 </label></li>
  <li><label><input type="checkbox" value="3">河南省 </label></li>
  <li><label><input type="checkbox" value="4">福建省 </label></li>
  <li><label><input type="checkbox" value="5">湖南省 </label></li>
  <li><label><input type="checkbox" value="6">江西省 </label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" class="btn" id="getValue">
</body>
</html>

3.此外则利用attr();

jquery1.6中新加了多个方法prop(),官方表达只有一句话:获取在合营的成分聚集的第多个成分的属性值。

attr() 方法设置或重回被选成分的属性和值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>复选框</title>
  <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript">
  $(function() {
    $("#all").click(function () {
      if (this.checked) {
        $("#list :checkbox").each(function () {
          $(this).prop("checked", true);  //选择器要有空格隔开
        })
      } else {
        $("#list :checkbox").each(function () {
          $(this).prop("checked", false);
        })
      }
    });
    //第二种
//    $("#all").click(function(){
//      if(this.checked){
//        $("#list :checkbox").prop("checked", true);
//      }else{
//        $("#list :checkbox").prop("checked", false);
//      }
//    });

    //全选
    $("#selectAll").click(function () {
      $("#list :checkbox,#all").prop("checked", true);
    });

    //全不选
    $("#unSelect").click(function () {
      $("#list :checkbox,#all").prop("checked", false);
    });

    //反选
    $("#reverse").click(function () {
      $("#list :checkbox").each(function () {
//        $(this).prop("checked", !$(this).prop("checked"));
        this.checked=!this.checked;
      });

      if($('#list :checkbox:checked').length==$("#list :checkbox").length){
        $("#all").prop("checked",true);
      }
      else{
        $("#all").prop("checked",false);
      }
    });

    //获取选中的值
    $("#getValue").click(function(){
      var valArr = new Array();
      $("#list :checkbox:checked").each(function(i){   //判断被选中的
        valArr[i] = $(this).val();
      })
      var vals = valArr.join(',');//转换为逗号隔开的字符串
      alert(vals);
    });
  })
  </script>
</head>
<body>
<ul id="list">
  <li><label><input type="checkbox" value="1.广东省">广东省 </label></li>
  <li><label><input type="checkbox" value="2.广西省">广西省 </label></li>
  <li><label><input type="checkbox" value="3.河南省">河南省 </label></li>
  <li><label><input type="checkbox" value="4.福建省">福建省 </label></li>
  <li><label><input type="checkbox" value="5.湖南省">湖南省 </label></li>
  <li><label><input type="checkbox" value="6.江西省">江西省 </label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" class="btn" id="getValue">
</body>
</html>

attr()

$(function() {
    $("#all").click(function () {
      if (this.checked) {
        $("#list :checkbox").each(function () {
          $(this).prop("checked", true);  //选择器要有空格隔开
        })
      } else {
        $("#list :checkbox").each(function () {
          $(this).prop("checked", false);
        })
      }

    });

2.是有true,false多个性格使用prop();(如'checked','selected','disabled'等)