Maison >interface Web >js tutoriel >Sélection de la case jQuery et obtenir la valeur

Sélection de la case jQuery et obtenir la valeur

php中世界最好的语言original: 2018-03-15 11:03:532772parcourir

Cette fois, je vais vous apporter la case à cocher de jQuery pour sélectionner et obtenir la valeur Quelles sont les précautions pour sélectionner et obtenir la valeur de la case à cocher jQuery Ce qui suit est un exemple pratique. cas. Jetons un coup d’oeil.

1. Sélection de case à cocher

Dans jQuery, il existe deux manières courantes de sélectionner une case à cocher :

$("#cb1").attr("checked","checked");
$("#cb1").attr("checked",true);

remplit principalement trois fonctions :

1 Si la première case est cochée ou décochée, les cases suivantes seront à sélectionner. tout ou désélectionner tout ;

2. Lorsque toutes les cases ci-dessous sont cochées, la première case est définie pour être sélectionnée. Lorsque l'une des cases ci-dessous n'est pas cochée, la première case est décochée ;

3. Transmettez la valeur id de la case à cocher ci-dessous à la couche Contrôleur pour former un tableau id, puis appelez la méthode correspondante (généralement supprimer).

<script type="text/javascript">  function chgAll(t){//第一个复选框选中或取消选中，则下面的复选框为全选或取消全选；
    $("input[name='id']").attr('checked',t.checked);//改变name名为id的input标签内的复选框的checked属性
  }
  function chg(){//当下面的复选框全部选中时，则将第一个复选框设置为选中，当下面的复选框中有一个没有被选中时，则第一个复选框取消选中；
    var ids = $.makeArray($("input[name='id']"));
    for(var i in ids){
      if(ids[i].checked==false){//如果所有的复选框只要有一个未选中，则第一个复选框不会选中
        $("input[name='ids']").attr('checked', false);
        return;
      }
    }
    $("input[name='ids']").attr('checked', true);//全部选中的情况下，则第一个复选框选中
  }
  function deleteBatch(){//将下面的复选框的id值传递给Controller层，组成id数组，拼接url到controller层，调用批量删除方法（deleteBatch())方法
    var ids = $.makeArray($("input[name='id']:checked"));//通过$.makeArray将id放在数组中
    var url = '<%basePath%>/web/goodsList/deleteBatch';//此url指向controller层的deleteBatch方法，需要id属性
    var flag = true;
    for(var i in ids){//遍历数组
      if(i == 0){
          url += "?id=" + ids[i].value;//第一个id属性前加？拼接
          flag = false;
        } else {
          url += "&id=" + ids[i].value;//后面的id属性前加&拼接
          flag = false;
        }
      }
    if(flag){//如果没有选中商品
      alert("请选中商品！");
      return;
    }
    if(confirm("确定删除记录吗？")){
      window.location.href = url;//把拼接好的id数组传给页面
    }
    }
</script>

2. La liste correspondante dans la page jsp :

1. La case à cocher dans l'en-tête doit être renseignée dans la liste. (Première case à cocher) Définissez le nom et appelez la méthode chgAll(this) pour sélectionner tout ou rien

2 Définissez le nom de la case à cocher dans le tableau et appelez la méthode chg() pour implémenter la seconde ; fonction ci-dessus ;

3. Appelez la méthode deleteBatch() lorsque le formulaire est soumis

<body>
  <form:form id="uuForm" modelAttribute="goods"  action="<%basePath%>/web/goodsList/" method="post" >//form表单提交时调用deleteBatch()方法
    <p> <input type="button"  onclick="deleteBatch()" value="批量删除" /> </p>
  </form:form>
  <sys:message content="${message}" />
  <table id="cTable" >
    <thead>
      <tr>
      <th><input type="checkbox" name="ids" onchange="chgAll(this)" /></th>//调用chgAll(this)方法来实现全选或全不选,此处的this指所有复选框对象
        <th>商品编号</th>
        <th>商品标题</th>
      </tr>
    </thead>
    <tbody>
      <c:forEach items="${goods}" var="goods" varStatus="status">
        <tr>
        <td><input type="checkbox" name="id" value="${goods.goodsId }" onchange="chg()"/></td>//调用chg()方法
          <td>${webGoodsInfo.goodsNo}</td>
          <td>${webGoodsInfo.goodsTitle}</td>
        </tr>
      </c:forEach>
    </tbody>
  </table>
   
</body>

@RequestMapping("deleteBatch")//对应jsp页面中的deleteBatch()请求
  public String deleteBatch(Long[] id, RedirectAttributes redirectAttributes){//此处的id为页面中的id值，必须保持一直！！！！
    if(id !=null&&id.length!=0){
      goodsService.deleteBatch(id);
    }
    return "redirect:"+Global.getAdminPath()+"/web/webGoodsInfo/?repage";//重定向到列表页面
  }
}

Regardez l'effet :

Je crois que vous avez lu le cas dans cet article Après la maîtrise la méthode, veuillez prêter attention aux autres articles connexes sur le site Web php chinois pour un contenu plus passionnant !

Lecture recommandée :

Comment le plug-in jquery imprime-t-il le contenu de la page

Comment jQuery exécute-t-il la page pour déclencher des événements de clic par défaut

Explication détaillée de la forme de l'arbre dans layui sur le passage de valeur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter Jquery ajax inter-domaines asynchroneArticle suivant：Comment implémenter Jquery ajax inter-domaines asynchrone

Articles Liés

Voir plus