Sélection de la case jQuery et obtenir la valeur-js tutoriel-php.cn

Sélection de la case jQuery et obtenir la valeur

php中世界最好的语言

Libérer： 2018-03-15 11:03:53

original

2678 Les gens l'ont consulté

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);

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

@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";//重定向到列表页面
  }
}

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Sélection de la case jQuery et obtenir la valeur