jQuery-Kontrollkästchen auswählen und Wert abrufen

Dieses Mal zeige ich Ihnen das Kontrollkästchen zum Auswählen und Abrufen des Werts. Was sind die Vorsichtsmaßnahmen zum Auswählen und Abrufen des Werts des jQuery-Kontrollkästchens? . Werfen wir einen Blick darauf.

1. Kontrollkästchenauswahl

In jQuery gibt es zwei gängige Möglichkeiten, ein Kontrollkästchen auszuwählen:

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

entspricht, erfüllt hauptsächlich drei Funktionen:

1 Wenn das erste Kontrollkästchen aktiviert oder deaktiviert ist, werden die folgenden Kontrollkästchen ausgewählt alle oder alle abwählen;

2. Wenn alle Kontrollkästchen unten aktiviert sind, ist das erste Kontrollkästchen deaktiviert.

3. Übergeben Sie den ID-Wert des Kontrollkästchens unten an die Controller-Ebene, um ein ID-Array zu bilden, und rufen Sie dann die entsprechende Methode auf (normalerweise löschen).

<script>  function chgAll(t){//第一个复选框选中或取消选中，则下面的复选框为全选或取消全选；
    $("input[name=&#39;id&#39;]").attr(&#39;checked&#39;,t.checked);//改变name名为id的input标签内的复选框的checked属性
  }
  function chg(){//当下面的复选框全部选中时，则将第一个复选框设置为选中，当下面的复选框中有一个没有被选中时，则第一个复选框取消选中；
    var ids = $.makeArray($("input[name=&#39;id&#39;]"));
    for(var i in ids){
      if(ids[i].checked==false){//如果所有的复选框只要有一个未选中，则第一个复选框不会选中
        $("input[name=&#39;ids&#39;]").attr(&#39;checked&#39;, false);
        return;
      }
    }
    $("input[name=&#39;ids&#39;]").attr(&#39;checked&#39;, true);//全部选中的情况下，则第一个复选框选中
  }
  function deleteBatch(){//将下面的复选框的id值传递给Controller层，组成id数组，拼接url到controller层，调用批量删除方法（deleteBatch())方法
    var ids = $.makeArray($("input[name=&#39;id&#39;]:checked"));//通过$.makeArray将id放在数组中
    var url = &#39;<%basePath%>/web/goodsList/deleteBatch&#39;;//此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. Die entsprechende Liste auf der JSP-Seite:

1. Das Kontrollkästchen in der Kopfzeile sollte in der Liste enthalten sein (Erstes Kontrollkästchen) Legen Sie den Namen fest und rufen Sie die Methode chgAll(this) auf, um alle oder keine auszuwählen.

2 Legen Sie den Namen des Kontrollkästchens in der Tabelle fest und rufen Sie die Methode chg( ) auf, um die zweite zu implementieren Funktion oben;

3. Rufen Sie die Methode deleteBatch() auf, wenn das Formular gesendet wird

  <form>/web/goodsList/" method="post" >//form表单提交时调用deleteBatch()方法
    <p> <input> </p>
  </form>
  <message></message>
  

                  //调用chgAll(this)方法来实现全选或全不选,此处的this指所有复选框对象                                                            //调用chg()方法                                              

	商品编号	商品标题
	${webGoodsInfo.goodsNo}	${webGoodsInfo.goodsTitle}

   

3. Sehen Sie sich den Spring MCV Controller-Code an

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

Schauen Sie sich die Wirkung an:

Ich glaube, Sie haben den Fall in diesem Artikel gelesen Nachdem Sie die Methode gemeistert haben, lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website, um weitere spannende Inhalte zu erhalten!

Empfohlene Lektüre:

Wie druckt das jQuery-Plug-in den Seiteninhalt?

Wie führt jQuery die Seite aus? Klickereignisse standardmäßig auslösen

Detaillierte Erklärung der Baumform in Laui zur Wertübergabe

Das obige ist der detaillierte Inhalt vonjQuery-Kontrollkästchen auswählen und Wert abrufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!