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已经说过的问题。

所以，我试着添加这个脚本，但是它不起作用：

假设您使用的是1.2之后的jQuery版本，则在选择器中使用@无效，同时确保脚本包含在$(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';
  }

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

选中复选框显示单选按钮

4 个答案: