时间戳

首页 > 解决方案 > 一堆单选按钮，并希望在其中一个上启用切换

javascript - 一堆单选按钮，并希望在其中一个上启用切换

问题描述

我javascript在单选按钮上使用香草来显示/隐藏带有 id 的 tr 块以选择收音机并在unselect收音机上隐藏那块..

香草 js 工作正常，想转移到 jquery 以在 jquery 中尝试相同，但我在这里有点迷路

所以每个收音机都有不同的ID，没有等级。如果选中，我只想显示 id10 的收音机，如果选择了任何其他收音机，我想隐藏那个 div，我该怎么做jquery

对于 javascript，我正在这样做

function toggle() {
              var x = document.getElementById("myDIV");
              if (x.style.display === "none") {
                x.style.display = "block";
              } else {
                x.style.display = "none";
              }
            }

像这样尝试：

但它甚至什么都不做

甚至没有警报

$(document).ready(function() {
                $("#myDiv").hide();
                $('input[name="outputFormat"]').click(function() {
                    alert("hi");
                    let id = $(this).attr('id');
                    if(id == 'of9') {
                        $("#myDiv").show();
                    }else {
                        $("#myDiv").hide();
                    }
                });
            }

标签： javascriptjquery

解决方案

您可以使用具有所需组名称的属性选择器来定位无线电。然后，您可以使用.is()检查当前元素是否与您的选择器匹配（如Element.matches在 vanilla 中），然后使用实用程序函数.show()和.hide.

$('input[name="sel"]').on('change', function() {
  if ($(this).is('#id10')) {
    $('#myDiv').show();
  } else {
    $('#myDiv').hide();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="sel" value="1">
<input type="radio" name="sel" value="2" id="id10">
<input type="radio" name="sel" value="3">

<div id="myDiv">Content</div>

推荐阅读