On checkbox checked show radio button

Question

I would like to ask for a little help here, since I haven't got any big knowledge in Javascript, nor in jQuery. I need to show 5 radio buttons when a checkbox is checked, the checkboxes represent languages that the user speaks, so for each of the selected, there should appear 5 separate radio buttons for how good they speak it(1 to 5). I tried to do it with jQuery, but I did not manage to get very far away...

This is where my checkboxes are created(dynamically):

<% 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 />

        <%} %>

So, I tried to add this script, but it's not working:

<script type="text/javascript">


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

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

});

I also tried this way - to use this 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';
  }

And it works, but it works on already present controls, and I guess I need to create mine dynamically, or maybe not? And I tried to hide a present control with CSS, but then when the script shows it, it is there, only invisible :)

Also, I would want to get the name and value of the radio buttons from my database, ie Model(this is ASP.NET MVC).. Can someone help me a little bit, please?

Answer 1

ID s are meant to be unique. That is causing your issue.

Answer 2

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

Answer 3

Besides the issue with Id already stated.

So, I tried to add this script, but it's not working:

Assuming you are using a version of jQuery later than 1.2 the use of @ in the selector is invalid, also make sure the script is wrapped in $(function(){});

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

Code example on jsfiddle .

And it works, but it works on already present controls, and I guess I need to create mine dynamically, or maybe not? And I tried to hide a present control with CSS, but then when the script shows it, it is there, only invisible :)

If by this you mean that they are appended after the document has finished loading you will need to use live() (or delegate) so you can target elements that have yet been added to the dom.

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

Answer 4

Just to put the answer here, so that someone else can use it, although I'm not very proud with the current implementation, it is not a very pretty code, but it still works...

The checkboxes and radiobuttons - separated in groups with unique Group IDs, so that the first checkbox can control the first radiobutton list etc...

 <% 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 />

        <%} %>

Four individual pieces of code doing just the same: hiding the radiobutton lists on start:

<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';
});

And the function that's called on click on the checkboxes, that toggles visibility:

<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';
  }

This is the client-side code, in the back there's some pretty wild