如何使用jquery比较或检查html元素的输入字段类型

请检查

var Gid = "container";
if($('#'+Gid + " > input[type=radio]").length > 0)
    console.log("Radio");
if($('#'+Gid + " > input[type=checkbox]").length > 0)
    console.log("Checkbox");
if($('#'+Gid + " > select").length > 0)
    console.log("Select");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<input type="radio" />  
  <input type="checkbox" />  
 <select></select>
</div>

您可以通过以下命令检查字段类型

<script>
        function findInputType(formObject) {
          for (i=0; i<formObject.childNodes.length; i++) {
             if (formObject.childNodes[i].tagName == "INPUT") {
                    if (formObject.childNodes[i].type == "checkbox") {
                   alert("This is CheckBox type.")
                }
                if (formObject.childNodes[i].type == "radio") {
                   alert("This is Radio type")
                }
             }   
             if (formObject.childNodes[i].tagName == "SELECT") {
                   alert("This is Select field")
             }
          }
    </script>     
    <script>
        // method to find the input type
        findInputType(document.myform)
    </script>

如果您正在查找所有类型的输入元素，包括div中的select，您可以这样做:

$(function() {
  var elems = new Set(); //for collecting unique elements
  $("#myDiv input").each(function() {
    elems.add($(this).attr("type"));
  });
  if ($("#myDiv select").length > 0) elems.add("select");
  for (let item of elems) console.log(item);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myDiv">
  <input type="radio" name="rad" />Radio
  <br/>
  <input type="checkbox" name="rad" />Checkbox
  <br/>
  <input type="text" />
  <br/>
  <select>
    <option>Select</option>
  </select>
</div>

或者将当前代码更改为如下内容:

$(function() {
  var Gid = "myDiv";
  if ($('#' + Gid + " input[type=radio]").length != 0)
    alert("radio");
  if ($('#' + Gid + " input[type=checkbox]").length != 0)
    alert("checkbox");
  if ($('#' + Gid + " select").length != 0)
    alert("select");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myDiv">
  <input type="radio" name="rad" />Radio
  <br/>
  <input type="checkbox" name="rad" />Checkbox
  <br/>
  <select>
    <option>Select</option>
  </select>
</div>

一种应该涵盖大多数用例的方法如下:

var Gid = "container";
// here we look inside the '#container' element to find all
// elements matching the jQuery ':input' selector expression,
// which includes <select>, <input>, <textarea>,
// and then we iterate over each of the found elements (if
// any):    
$('#' + Gid).find(':input').each(function(){
  // caching the current element for repeated use:
  var el = this,
      // localName is the same as tagName, but in lowerCase,
      // for example 'INPUT' is 'input':
      tag = el.localName,
      // here we see if the current element has a 'type' property,
      // which it does if the tag is equal to 'input'; if it does
      // have a 'type' property we assign a string to tell the
      // user what that 'type' is; otherwise we return an empty
      // string instead (so that the later concatenation will
      // still work):
      hasType = tag === 'input' ? ', of type="' + el.type + '"' : '',
      // a naive check to see if we should say 'an input...' or
      // 'a select...':
      determiner = ['a','e','i','o','u'].indexOf(tag.charAt(0)) > -1 ? 'an' : 'a';
  console.log('This is ' + determiner + ': ' + tag + ' element' + hasType);
});

var Gid = "container";
$('#' + Gid).find(':input').each(function() {
  var el = this,
    tag = el.localName,
    hasType = tag === 'input' ? ', of type="' + el.type + '"' : '',
    determiner = ['a', 'e', 'i', 'o', 'u'].indexOf(tag.charAt(0)) > -1 ? 'an' : 'a';
  console.log('This is ' + determiner + ': ' + tag + ' element' + hasType);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <input type="radio" />
  <input type="checkbox" />
  <select></select>
</div>

JS Fiddle demo.

引用:

• JavaScript:
  • Array.prototype.indexOf() .
  • 条件(三元)运算符。
  • Element.localName .
  • String.prototype.charAt() .
• jQuery:
  • each() .
  • :input选择器