check radiobutton 1, when radiobutton 3 is checked

Question

i have html page like this

<br>Q1A Making decisions after finding out what others think <br>                 
                        <input name="q1a" id="0" value="0" onclick="MyAlert()" type="radio" required>
                        <input name="q1a" id="1" value="1" onclick="MyAlert()" type="radio" required>
                        <input name="q1a" id="2" value="2" onclick="MyAlert()" type="radio" required>
                        <input name="q1a" id="3" value="3" onclick="MyAlert()" type="radio" required>
                        <input name="q1a" id="4" value="4" onclick="MyAlert()" type="radio" required>
                        <input name="q1a" id="5" value="5" onclick="MyAlert()" type="radio" required>

                        <br>Q1B Making decisions without consulting others <br>
                        <input name="q1b" id="6" value="0" onclick="MyAlert()" type="radio" required>
                        <input name="q1b" id="7" value="1" onclick="MyAlert()" type="radio" required>
                        <input name="q1b" id="8" value="2" onclick="MyAlert()" type="radio" required>
                        <input name="q1b" id="9" value="3" onclick="MyAlert()" type="radio" required>
                        <input name="q1b" id="10" value="4" onclick="MyAlert()" type="radio" required>
                        <input name="q1b" id="11" value="5" onclick="MyAlert()" type="radio" required>

if Q1A's value 1 is checked by user, at that moment i want to check Q1B's value 4. analogy is, Q1A's value + Q1B's value = 5.

how can i do this ? my rough idea is:

<script>
    function MyAlert()  
    {  
      var q1a = document.getElementByName("q1a").value();
      if(q1a == 0){
        $('#5[name="q1b"]').attr('checked', true);
      }
    } 
</script>

but this is not working.

    <a href="https://jsfiddle.net/zLgmc5be/"> My Code Example </a>

Thank you for help.

You have a syntax error. `document.getElementById("q1b")radio` is not valid syntax. — Barmar, Jul 07 '17 at 19:29
IDs have to be unique, you can't have multiple elements with the same ID. — Barmar, Jul 07 '17 at 19:31
A syntax error in if statement and always remember to have single id. Radio button must have same name but id attribute can be different — Harpreet Singh, Jul 07 '17 at 19:32
@VinitaWadhwani It's not clear what you're trying to do with that syntax. Radio button elements don't have a `radio` property. — Barmar, Jul 07 '17 at 19:33
if i change id of each radio button, for each set of Q19, Q20. i found difficulty in script, thats y tried same id. — Vinita Wadhwani, Jul 07 '17 at 19:35
you should have searched on the internet before posting your question here. — Akshay jain, Jul 07 '17 at 19:37
@VinitaWadhwani Use IDs like `q19a-0`, `q19a-1`, `q19a-2`, etc. — Barmar, Jul 07 '17 at 19:45
first make every Id unique then if (document.getElementById('r1').checked) { rate_value = document.getElementById('r1').value; } — Akshay jain, Jul 07 '17 at 19:47
Your IDs still aren't unique. You have `id="0"` multiple times. — Barmar, Jul 07 '17 at 19:49
first make every Id unique as @Barmar said then `if (document.getElementById('1').checked) { document.getElementById('10').checked = true; }` — Akshay jain, Jul 07 '17 at 19:53

score 0 · Answer 1 · answered Jul 07 '17 at 19:54

You have duplicate IDs, that won't work. getElementById() just returns the first element with that ID.

Instead of finding the element by its ID, find it by its value, a [value=] selector.

function MyAlert(button) {
  if (button.name == 'q19a') {
    var otherName = 'q19b';
    var otherVal = 5 - button.value;
    $(":radio[name=" + otherName + "][value=" + otherVal + "]").prop("checked", true);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>Q19A Using common sense and conviction to make decisions <br>
<input name="q19a" value="0" onclick="MyAlert(this)" type="radio" required>
<input name="q19a" value="1" onclick="MyAlert(this)" type="radio" required>
<input name="q19a" value="2" onclick="MyAlert(this)" type="radio" required>
<input name="q19a" value="3" onclick="MyAlert(this)" type="radio" required>
<input name="q19a" value="4" onclick="MyAlert(this)" type="radio" required>
<input name="q19a" value="5" onclick="MyAlert(this)" type="radio" required>

<br>Q19B Using data, analysis, and reason to make decisions <br>
<input name="q19b" value="0" onclick="MyAlert(this)" type="radio" required>
<input name="q19b" value="1" onclick="MyAlert(this)" type="radio" required>
<input name="q19b" value="2" onclick="MyAlert(this)" type="radio" required>
<input name="q19b" value="3" onclick="MyAlert(this)" type="radio" required>
<input name="q19b" value="4" onclick="MyAlert(this)" type="radio" required>
<input name="q19b" value="5" onclick="MyAlert(this)" type="radio" required>

<br>Q20A Planning ahead based on projections <br>
<input name="q20a" value="0" onclick="MyAlert(this)" type="radio" required>
<input name="q20a" value="1" onclick="MyAlert(this)" type="radio" required>
<input name="q20a" value="2" onclick="MyAlert(this)" type="radio" required>
<input name="q20a" value="3" onclick="MyAlert(this)" type="radio" required>
<input name="q20a" value="4" onclick="MyAlert(this)" type="radio" required>
<input name="q20a" value="5" onclick="MyAlert(this)" type="radio" required>

<br>Q20B Planning as necessities arise, just before carrying out the plans <br>
<input name="q20b" value="0" onclick="MyAlert(this)" type="radio" required>
<input name="q20b" value="1" onclick="MyAlert(this)" type="radio" required>
<input name="q20b" value="2" onclick="MyAlert(this)" type="radio" required>
<input name="q20b" value="3" onclick="MyAlert(this)" type="radio" required>
<input name="q20b" value="4" onclick="MyAlert(this)" type="radio" required>
<input name="q20b" value="5" onclick="MyAlert(this)" type="radio" required>

@VinitaWadhwani See https://stackoverflow.com/questions/5431351/simple-example-doesnt-work-on-jsfiddle — Barmar, Jul 07 '17 at 20:02
@VinitaWadhwani I have `:radio` in the selector, what's the problem? — Barmar, Jul 07 '17 at 20:04
i want Q1B's radiobutton automatically checked whenever i choose any Q1A's radiobutton — Vinita Wadhwani, Jul 07 '17 at 20:05
That's what my answer does. If you check Q1A button 0, it automatically checks Q1B button 5. If you check Q1A button 1, it checks Q1B button 4. And so on. — Barmar, Jul 07 '17 at 20:06
Did you change the Javascript option from `On Load` to `No Wrap` in the fiddle, like it says in the question I linked to? — Barmar, Jul 07 '17 at 20:12

check radiobutton 1, when radiobutton 3 is checked

1 Answers1