如何在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中簽到的相關父單選按鈕一起顯示？

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> 

兩種解決方案都沒有使用ID

編輯：2015年8月4日上午10:04（IST）

參考小提琴的解決方案

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

PS HTML元素必須具有唯一的ID

Answer 2

首先，同一頁面上不能有多個具有相同ID的元素。 刪除子單選按鈕的id並將它們添加到div中，就像id ='r1a'/'r2a'這樣。子單選按鈕的id，您可以執行以下操作：

if (document.getElementById('r1').checked) {
    document.getElementById('r2').checked = false;
    document.getElementById('r2a').style.visibility = 'hidden';
    document.getElementById('r1a').style.visibility = 'visible';
} else if (document.getElementById('r2').checked) {
    document.getElementById('r1').checked = false);
    document.getElementById('r2a').style.visibility = 'visible';
    document.getElementById('r1a').style.visibility = 'hidden';
}

Answer 3

您不應在單個頁面上具有多個ID，但如果必須，則可以使用querySelectorAll並執行以下操作：

HTML：

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

JS：

function MyAction(id) {
    var elements = document.querySelectorAll("#"+id);
    for (i = 0; i < elements.length; i++) {
        if (elements[i].getAttribute("name") == "mysubRadio") {
            elements[i].parentNode.style.visibility = "hidden";
        }
    }
}

小提琴的例子

Answer 4

使用jQuery，只要將類添加到父級和子級收音機，就可以做到這一點：

<form name="myForm">text1:
    <input type="radio" id="r1" name="myRadio" value="1" class="super" />
    <div class='subradio'>subtext1:
        <input type="radio" id="r2" name="mysubRadio" value="11" class='subradio' />
    </div>text2:
    <input type="radio" id="r3" name="myRadio" value="2" class="super" />
    <div class='subradio'>subtext2:
        <input type="radio" id="r4" name="mysubRadio" value="22" class='subradio' />
    </div>
</form>


$('.super').on('change', function () {
    $('div.subradio').hide();
    $(this).next('.subradio').show().find('input.subradio').prop('checked', true);
});

注意：無需“取消選中”，因為當您選中其中一個時，無線電具有相同的name屬性，而其他選中時，則取消選中。

此處的工作代碼示例： http : //jsfiddle.net/MarkSchultheiss/jy807kgo/