I want to check if a div has radio, file, checkbox. I just plete my markup in Html. I haven't any idea about this.

<div id="div1">

  <input type="radio" name="rd1"> Male
  <input type="radio" name="rd1"> Female

</div> 

<br/>

<div id="div2">

  <input type="file" name="file1">
  <input type="file" name="file2">

</div>

I want to check if a div has radio, file, checkbox. I just plete my markup in Html. I haven't any idea about this.

<div id="div1">

  <input type="radio" name="rd1"> Male
  <input type="radio" name="rd1"> Female

</div> 

<br/>

<div id="div2">

  <input type="file" name="file1">
  <input type="file" name="file2">

</div>

• javascript
• jquery
• html

6 Answers 6

You can use :has() selector

if ($('div:has(:radio)').length > 0) {
    //code for radio button
}
if ($('.div:has(:file)').length > 0) {
    //code for file
}
if ($('.div:has(:checkbox)').length > 0) {
    //code for checkbox
}

if ($('div').find('input[type="radio"], input[type="checkbox"], input[type="file"]').length > 0) {...}

Use has() method and :radio :checkbox selectors, you dont need any if() statement, check this:

$('div:has(:radio,[type=file],:checkbox)').html("This div has these inputs")

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">

  <input type="radio" name="rd1"> Male
  <input type="radio" name="rd1"> Female

</div> 

<br/>

<div id="div2">

  <input type="file" name="file1">
  <input type="file" name="file2">

</div>
<br>
<div id="div3">
   Other inputs div
  <input type="text" name="i1" value="test"><br>
  <input type="number" name="i2" value="12">

</div>

Simply check if the div has any input descendents

$("div").each( function() {
  var divWithInputExists = $(this).find("input").length > 0;
  console.log("Does this div has inputs -> " , divWithInputExists)
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <input type="radio" name="rd1"> Male
  <input type="radio" name="rd1"> Femal
</div>
<br/>
<div id="div2">
  <input type="file" name="file1">
  <input type="file" name="file2">
</div>

You can do it one of the following ways

Using id selector

if($('#divID :radio').length)
{
   //
}
Using class selector

if($('.div-class :radio').length)
{
   //
}
Using tag name selector

if($('div :radio').length)
{
   //
}*emphasized text*

Radio check
if($('#div1').find(':radio').length > 0){...

File check

if($('#div2').find(':file').length > 0){...

if($('#div1').find(':radio').length > 0){
 console.log('div1 has radio');
}
if($('#div2').find(':file').length > 0){
 console.log('div2 has file');
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div1">
  <input type="radio" name="rd1"> Male
  <input type="radio" name="rd1"> Femal
</div> 
<br/>
<div id="div2">
  <input type="file" name="file1">
  <input type="file" name="file2">
</div>