在复选框选中显示单选按钮答案

【问题标题】：On checkbox checked show radio button在复选框选中显示单选按钮
【发布时间】：2011-03-22 02:01:50
【问题描述】：

我想在这里寻求一点帮助，因为我对 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 隐藏当前控件，但是当脚本显示它时，它就在那里，只是不可见 :)

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

【问题讨论】：

你可以从这里使用 radiolist 和 checkboxlist 助手：awesome.codeplex.com 并使用 parentId 将它们绑定在一起

标签： javascript jquery asp.net-mvc

【解决方案1】：

IDs 是唯一的。这导致了您的问题。

【讨论】：

我不确定我是否理解您的回答，也不确定您是否理解我的问题...我的问题是在单击复选框时创建单选按钮。 ID 部分是另一个问题，但稍后再说。谢谢你的回答，无论如何。问候
他的意思是<input id="applang"这一行创建了多个具有相同id的复选框。您应该将其更改为为每个复选框创建唯一 ID 的内容。
哦，我明白了。对于那个很抱歉。好吧，它必须是这样的，因为我正在像这样在控制器中拉动那些：string demoStringArray = Request.Form["applang"];如果名称不同，我将如何获得它们？
name 和 id 不是一回事

【解决方案2】：

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

【讨论】：

为什么，让我试试，不管成功与否，我都会写在这里。无论如何，谢谢你的回答。问候
哦，但是很抱歉 - 我希望首先隐藏 div，然后当我选中复选框时，我想让它可见。但是，如果我一开始就选择隐藏的 CSS，那么我的 Javascript 会将它物理地放在那里，但它会是不可见的..

【解决方案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();
    });
  });

【讨论】：

是的，我明白你的意思.. ID 问题非常严重。我使用您的建议创建此脚本以在页面加载（准备好）时隐藏包含单选按钮的 div，然后单击复选框再次可见。但是现在它变得可见（第一个 div，因为 div 的数量与复选框的数量一样多） - 第一个 div 在单击任何复选框时变得可见，所以我选中了 3 个复选框，第一个 div 发生了变化，而不是第三： $(document).ready(function () { var r = document.getElementById('radioDiv'); r.style.display = 'none'; });

【解决方案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';
  }

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

【讨论】：