在复选框上选中显示单选按钮

Question

我想在这里寻求一点帮助，因为我对Javascript和jQuery都不了解。 选中一个复选框时，我需要显示5个单选按钮，这些复选框代表用户说的语言，因此对于每个选定的语言，应该显示5个单独的单选按钮，以使他们说出更好的语言（1到5）。 我尝试使用jQuery来做到这一点，但是我没有走的很远...

这是动态创建我的复选框的地方：

<% for(int i = 0; i < Model.Languages.Count; i++)
          { %>

        <input id="applang" name="applang" type="checkbox" value="<%: Model.Languages[i].languageID%>" />

        <%: Model.Languages[i].name.ToString() %><br />

        <%} %>

因此，我尝试添加此脚本，但无法正常工作：

<script type="text/javascript">


$("input[@name='applang']").click(function () {

    $("input[type='radio']").show();

});

我也尝试过这种方式-使用以下javascript：

<script type="text/javascript">

  function toggle_visibility(id) {
      var e = document.getElementById(id);
      if (e.style.display == 'block')
          e.style.display = 'none';
      else
          e.style.display = 'block';
  }

它可以工作，但是可以在已经存在的控件上工作，我想我需要动态创建我的我，或者可能不是吗？ 我试图用CSS隐藏一个当前控件，但是当脚本显示它时，它就在那里了，只有不可见:)

另外，我想从数据库中获取单选按钮的名称和值，即Model（这是ASP.NET MVC）。有人可以帮帮我吗？

Answer 1

ID是唯一的。 那就是你的问题。

Answer 2

您可以将要显示或隐藏的控件放在div中，然后根据需要显示或隐藏div。

Answer 3

此外，有关Id的问题已经说明。

因此，我尝试添加此脚本，但无法正常工作：

假设您使用的jQuery版本高于1.2，则在选择器中使用@无效，还请确保脚本被包装在$(function(){});

  $(function(){
    $("input[name='applang']").click(function() {
        $("input[type='radio']").show();
    });
  });

jsfiddle上的代码示例。

它可以工作，但是可以在已经存在的控件上工作，我想我需要动态创建我的我，或者可能不是吗？ 我试图用CSS隐藏一个当前控件，但是当脚本显示它时，它就在那里了，只有不可见:)

如果这样意味着您将它们添加到文档完成加载之后，则需要使用live() （或委托），以便可以定位尚未添加到dom中的元素。

  $(function(){
    $("input[name='applang']").live("click", function() {
        $("input[type='radio']").show();
    });
  });

Answer 4

只是将答案放在这里，以便其他人可以使用它，尽管我对当前的实现并不十分满意，但这不是一个非常漂亮的代码，但是它仍然有效...

复选框和单选按钮-使用唯一的组ID分组，以便第一个复选框可以控制第一个单选按钮列表，等等。

 <% for(int i = 0; i < Model.Languages.Count; i++)
          { %>
            <% int count = i+1; %>
        <input id="applang" onclick="toggle_visibility('radioDiv<%:+count %>');" name="applang" type="checkbox" value="<%: Model.Languages[i].languageID%>" />

        <%: Model.Languages[i].name.ToString() %>

        <div id="radioDiv<%:+count %>"><input name="weigthRadio<%:+count %>" type="radio" value="2"/>Dovolen<input type="radio" name="weigthRadio<%:+count %>" value="3" />Dobar<input type="radio" name="weigthRadio<%:+count %>" value="4" />Mnogu dobar<input type="radio" name="weigthRadio<%:+count %>" value="5" />Odlicen</div>
        <br />

        <%} %>

四个单独的代码段执行相同的操作：在开始时隐藏单选按钮列表：

<script type="text/javascript">


$(document).ready(function () {
    var r = document.getElementById('radioDiv1');
    r.style.display = 'none';
});
$(document).ready(function () {
    var r = document.getElementById('radioDiv2');
    r.style.display = 'none';
});
$(document).ready(function () {
    var r = document.getElementById('radioDiv3');
    r.style.display = 'none';
});
$(document).ready(function () {
    var r = document.getElementById('radioDiv4');
    r.style.display = 'none';
});

单击复选框后调用的函数将切换可见性：

<script type="text/javascript">

  function toggle_visibility(id) {
      var e = document.getElementById(id);
      if (e.style.display == 'block')
          e.style.display = 'none';
      else
          e.style.display = 'block';
  }

这是客户端代码，后面有一些很疯狂的代码