jQuery利用name屬性獲取表單元素

admin發表於2017-03-09

name屬性是表單元素的必要屬性,所以通過name屬性獲取表單元素也是常用的方式。

下面就通過程式碼例項介紹一下如何實現此功能,程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function getValues_ByName() { 
  var order = []; 
  $("[name=chkbox_id]:checked").each(function () { 
    order.push($(this).val()); 
  }); 
  var values = order.join(','); 
  if (values == "") { 
    alert("選項不能為空!"); 
    return; 
  } 
  else { 
    alert(values); 
  } 
}

以上是一個程式碼片段,下面對程式碼做一下注釋,就以核取方塊為例。

一.程式碼註釋:

1.function getValues_ByName() {},此函式可以通過name屬性值對錶單進行相關操作。

2.var order = [],宣告一個陣列用於存放選中的核取方塊的value屬性值。

3.$("[name=chkbox_id]:checked").each(function () { }),獲取name屬性值為"chkbox_id"且被選中的元素,然後以每一個被選中的核取方塊框為上下文進行相關操作。

4.order.push($(this).val()),將選中的值放入陣列。

5.var values = order.join(','),使用逗號將陣列中的元素連線成字串。

6.if (values == "") {alert("選項不能為空!"); return; } ,如果為空字串,彈出提示並跳出函式。

7. else {alert(values); } ,否則的話彈出選中項的值。

二.相關閱讀:

1.[name=chkbox_id]可以參閱jQuery [attribute=value]一章節。

2.each()函式可以參閱jQuery each()一章節。  

3.push()函式可以參閱javascrip push()一章節。

4.val()函式可以參閱jQuery val()一章節。   

5.join()函式可以參閱javascript join()一章節。

相關文章