javascript - 如何在 javascript 或 jquery 中显示/向下滑动相关单选按钮

Question

我的标题问题可能没有意义，但我想做的是:

当我单击text1的单选按钮时，subtext1的单选按钮将显示。然后，当单击text2的单选按钮时，subtext2的单选按钮将显示，同时隐藏subtext1的单选按钮，并取消选中之前选中的subtext1的单选按钮。这里的元素id是从后端按顺序创建的。

<form name="myForm">
    text1: <input type="radio" id="r1" name="myRadio"  value="1" onchange="action()"/>
      <div>subtext1: <input type="radio" id="r1" name="mysubRadio"  value="11" /></div>
    text2: <input type="radio" id="r2" name="myRadio"  value="2" onchange="action() />
      <div>subtext2: <input type="radio" id="r2" name="mysubRadio"  value="22" /></div> 
</form>

我尝试使用

document.getElementById('r1').getElementByName('myRadio') 

获取特定的单选按钮，但这似乎是一个糟糕的语法。

任何人都可以提供线索，如何知道子单选按钮与我在 JavaScript 中 checkin 的相关父单选按钮一起显示？

Answer 1

使用 jQuery 的解决方案:

$(function() {
  var myRadios = $('input[name=myRadio]'); // cache all once
  var mysubRadios = $('input[name=mysubRadio]');
  myRadios.on('change', function(e) {
    e.stopPropagation(); //cancel event bubbling
    myRadios.next('div').hide(); // hide all sub text
    mysubRadios.prop('checked', false); // un mark all sub radios
    $(this).next('div').show(); // show sub text for the current one
  });
  myRadios.next('div').hide(); // hide all sub text on page load
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form name="myForm">
  text1:
  <input type="radio" name="myRadio" value="1" />
  <div>subtext1:
    <input type="radio" name="mysubRadio" value="11" />
  </div>
  text2:
  <input type="radio" name="myRadio" value="2" />
  <div>subtext2:
    <input type="radio" name="mysubRadio" value="22" />
  </div>
</form>

使用纯 js 和 css 的解决方案:

var toggle = function() {
  var mysubRadio = document.getElementsByName('mysubRadio');
  var i = mysubRadio.length;
  var p;
  var el;
  var inp;
  while (i--) { // loop through each sub radios
    el = p = mysubRadio[i].parentNode; // get the parent div of radio
    while (el.previousSibling && !el.nodeName.match(/input/i)) { // get prev sibling input of the div
      el = el.previousSibling;
    }
    p.style.display = el.checked ? 'block' : 'none'; // show/hide sub text as per selection
    mysubRadio[i].checked = false; //un check
  }
};

input[name=myRadio] + div {
  display: none;
  /* hide all sub text on page load */
}

<form name="myForm">
  text1:
  <input type="radio" name="myRadio" value="1" onchange="toggle()" />
  <div>subtext1:
    <input type="radio" name="mysubRadio" value="11" />
  </div>
  text2:
  <input type="radio" name="myRadio" value="2" onchange="toggle()" />
  <div>subtext2:
    <input type="radio" name="mysubRadio" value="22" />
  </div>
</form>

两种解决方案均未使用 ids

编辑时间:2015 年 8 月 4 日上午 10:04(IST)

解决方案引用fiddle

$(function() {
  var myRadios = $('input[name=myRadio]'); // cache all once
  var mysubRadios = $('input[name=mysubRadio]');
  myRadios.on('change', function(e) {
    e.stopPropagation(); //cancel event bubbling
    myRadios.closest('tr').next('tr').hide(); // hide all sub text
    mysubRadios.prop('checked', false); // un mark all sub radios
    $(this).closest('tr').next('tr').show(); // show sub text for the current one
  });
  myRadios.closest('tr').next('tr').hide(); // hide all sub text on page load
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form name="myForm">
  <table>
    <tr>
      <td>text1:</td>
      <td>
        <input type="radio" id="r1" name="myRadio" value="1" class="super" />
      </td>
    </tr>
    <tr>
      <td>
        <table>
          <tr>
            <div class='subradio'>subtext1:
              <input type="radio" id="r2" name="mysubRadio" value="11" class='subradio' />
            </div>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>text2:</td>
      <td>
        <input type="radio" id="r3" name="myRadio" value="2" class="super" />
      </td>
    </tr>
    <tr>
      <td>
        <table>
          <tr>
            <div class='subradio'>subtext2:
              <input type="radio" id="r4" name="mysubRadio" value="22" class='subradio' />
            </div>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</form>

P.S. Html 元素必须具有唯一的 ID