检查radiobutton 1,检查radiobutton 3

时间:2017-07-07 19:26:56

标签: javascript html radio-button

我有像这样的HTML页面

<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>

如果用户检查Q1A的值1,那时我想检查Q1B的值4.类比是,Q1A的值+ Q1B的值= 5.

我该怎么做? 我粗略的想法是:

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

但这不起作用。

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

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

您有重复的ID,无法使用。 getElementById()只返回带有该ID的第一个元素。

不是按ID查找元素,而是通过其值[value=]选择器找到它。

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>