獲取選定的單選按鈕的值，而不知道形式標識，且未多少形式在頁面

Question

我正在尋找一個安全的方式來獲得一個選定的單選按鈕的值有：

• 不知形式ID
• 我不知道類似的多少（IDS除外）的形式我有我的頁面

我目前使用這樣的：

if (($(elem).is('input[type="radio"]')) && ($(elem).attr('name') !== undefined)) { 
    return $('input[name="' + $(elem).attr('name') + '"]:checked').val(); 
} 

但是，如果我有不同形式的類似名稱，這是行不通的，我甚至不知道這是否安全可以將這樣的事情放在選擇器上。

我的目標是創建一個getValue()功能，沒有自然的事返回一個元素（$(elem).length == 1）的值：

var getValue = function(elem) { 
    if ($(elem).is('input[type="checkbox"]')) { 
     return ($(elem).prop('checked') == true); 
    } 
    else if (($(elem).is('input[type="radio"]')) && ($(elem).attr('name') !== undefined)) { 
     return $('input[name="' + $(elem).attr('name') + '"]:checked').val(); 
    } 
    else if ($(elem).prop('value') !== undefined) { 
     return $(elem).val(); 
    } else { 
     return $(elem).html(); 
    } 
} 

什麼建議嗎？

Answer 1

我找到了一個解決方案，使用this answer：

// Get selector from any dom element 
// @see https://stackoverflow.com/a/2068381/731138 
var getPath = function(elem) { 
    var path; 
    var node = $(elem); 
    while (node.length) { 
     var realNode = node[0]; 
     var name = realNode.localName; 
     if (!name) { 
      break; 
     } 
     name = name.toLowerCase(); 
     if (realNode.id) { 
      return name + '#' + realNode.id + (path ? '>' + path : ''); 
     } else if (realNode.className) { 
      name += '.' + realNode.className.split(/\s+/).join('.'); 
     } 
     var parent = node.parent(); 
     var siblings = parent.children(name); 
     if (siblings.length > 1) { 
      name += ':eq(' + siblings.index(node) + ')'; 
     } 
     path = name + (path ? '>' + path : ''); 
     node = parent; 
    } 
    return path; 
} 

// Return value of any element without knowledge of its type 
var getValue = function(elem, contextSelector) { 
    if ($(elem).is('input[type="checkbox"]')) { 
     return ($(elem).prop('checked') == true); 
    } 
    if (($(elem).is('input[type="radio"]')) && ($(elem).attr('name') !== undefined)) { 
     return $(contextSelector + '>input[name="' + $(elem).attr('name') + '"]:checked').val(); 
    } 
    if ($(elem).prop('value') !== undefined) { 
     return $(elem).val(); 
    } else { 
     return $(elem).html(); 
    } 
} 

然後，當我需要恢復領域的任何選擇發佈，這看起來像：

// Get all data to post 
var elemSelector = getPath(elem); 
var inputSelector = $(elem).data('input'); 
var inputData = {}; 
if (inputSelector !== undefined) { 
    if (inputSelector !== '') { 
     inputSelector = inputSelector + ' :input'; 
     $.each($(inputSelector), function (index, node) { 
      if (($(node).attr('name') === undefined) && ($(node).attr('id') === undefined)) { 
       return true; 
      } 
      var key = $(node).attr('name'); 
      if (key === undefined) { 
       key = $(node).attr('id'); 
      } 
      inputData[key] = getValue(node, elemSelector); 
     }); 
    } else { 
     inputData['value'] = getValue(elem, elemSelector); 
    } 
} 

Answer 2

你可以使用jquery以較少的努力獲得值。 jQuery中有很好的範圍選擇器，您可以使用它來選擇按鈕。 對於如

$("#some_div #inside_div formelement").val(); 

所有你必須知道的是父容器ID ATLEAST。