jQuery - check if has radio button in the div

user_8845190 0
Viewed 1561

I want to check if a div has radio, file, checkbox. I just complete 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>
html jquery javascript
6 Answers

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
}
user_16685330 
if ($('div').find('input[type="radio"], input[type="checkbox"], input[type="file"]').length > 0) {...}
user_7459310

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.com/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>

user_65421860

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.com/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>

user_74613810

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.com/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>

user_19840390 
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*
user_10537860
Related