Javascript, get element by multiple condition (id and value)

Question

I guess the problem is pretty simple but I couldn't find a solution anywhere. I want to check whether a radio button is checked or not. From here a possible solution:

For these inputs

<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />

you can simply

if(document.getElementById('gender_Male').checked) {
  //Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
  //Female radio button is checked
}

Yet my inputs are like this:

<label><input id="16" type="radio" value="14" name="Q3"></input>Yes</label>
<label><input id="16" type="radio" value="15" name="Q3"></input>No</label>

id is not unique by itself but only in combination with value... How do I check whether Yes or No are selected?

`id`s should ALWAYS be unique. If there are duplicate elements with the same `id`, it's technically invalid HTML. So, you should give them different `id`s, and this problem's done — markasoftware, Oct 27 '14 at 04:03
Based on your requirement, shouldn't your radio buttons have the same `name` rather than `id`s? — Sang Suantak, Oct 27 '14 at 04:18

score 0 · Answer 1 · answered Oct 27 '14 at 04:16

As @Markasoftware said, id should always be unique. But browser still parse your html with the same ids.

So key point is that you can select an element without id.

Try document.querySelectorAll or document.querySelector. Here is code:

document.querySelectorAll('input[value="14"]') // you can select all the `value='14'` inputs
document.querySelectorAll('input[name="Q3"]') // you can select all the `value='Q3'` inputs

You can compose these css3 selectors and reach your goal.

score 0 · Answer 2 · answered Oct 27 '14 at 04:16

You can try the next selector:

$('input#16.14').is(':checked'){ 
    //YES is checked
}
$('input#16.15').is(':checked'){ 
    //NO is checked
}

But id should be unique.

Another way to check which one is selected it's using the input name:

$('input[name=Q3]:checked').val()

This way you will get 14 if YES is checked or 15 if No is checked

score 0 · Answer 3 · answered Oct 27 '14 at 04:17

Assuming the yes/no element is next element of your gender radio, you can try something like:

$('[name="gender"]').change(function(){

  if($(this).val() == 'Male'){

    $(this).next('input[type="radio"][value="14"]').prop('checked',true);

  }else{
   //Female

  }

});

score 0 · Answer 4 · answered Oct 27 '14 at 04:21

0

Add a class to your radio buttons.

$('.radioGroup').change(function(){
  if($(this).val() == 'Male'){
      ///
  } else {
      //female
  }
});

answered Oct 27 '14 at 04:21

Fergoso

1,584
3
21
44

renjith · Answer 5 · 2014-10-27T06:18:46.760

    <html>
        <head>
            <meta charset="utf-8">

            <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
            <script src="//code.jquery.com/jquery-1.9.1.js"></script>
            <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

        </head>

        <body>
   <label><input id="16" type="radio" value="14" name="Q3"/>Yes</label>
   <label><input id="16" type="radio" value="15" name="Q3"/>No</label>

         <script type="text/javascript">
            $('input[name=Q3]').change(function () {
                if ($('input[name=Q3]:checked').length > 0) {
                    var k = $('input[name=Q3]:checked').val();
                    alert(k);
                }
            });
        </script>

        </body>
    </html>

score 0 · Answer 6 · answered Oct 27 '14 at 12:49

$(':radio').on('change',function() {
  if( this.checked && this.value === "14" ) {
    alert( "'Yes' was selected!" );
  } else if( this.checked && this.value === "15" ) {
    alert( "'No' was selected!" );
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input id="Q3_1" type="radio" value="14" name="Q3">Yes</label>
<label><input id="Q3_2" type="radio" value="15" name="Q3">No</label>

Javascript, get element by multiple condition (id and value)

6 Answers6