CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
aDameToKillFor
aDameToKillFor

Reputation: 11

On checkbox checked show radio button

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, i.e. Model(this is ASP.NET MVC).. Can someone help me a little bit, please?

Upvotes: 1

Views: 2618

Answers (4)

aDameToKillFor
aDameToKillFor

Reputation: 11

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

Upvotes: 0

Mark Coleman
Mark Coleman

Reputation: 40863

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

Upvotes: 0

Pete
Pete

Reputation: 10871

You could put the controls that you want to show and hide inside of a div then just show or hide the div as necessary.

Upvotes: 0

Daniel A. White
Daniel A. White

Reputation: 190925

IDs are meant to be unique. That is causing your issue.

Upvotes: 1

Related Questions