Tell me how to make it so that when you click on input its ID read, then a div element with the same id and delete the uk-hidden class from this element.

 jQuery(document).ready(function($) { $("input").click(function() { var $chek = $(this).attr('id'); $('.result div').find($chek).removeClass('uk-hidden'); console.log($chek); }); }); 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/css/uikit.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="uk-width-4-10"> <input id="check1" type="radio" name="voice" value="check1" /> <label for="check1">Вариант 1</label> <br /> <input id="check2" type="radio" name="voice" value="check2" /> <label for="check2">Вариант 2</label> <br /> </div> <div class="uk-width-6-10 result"> <div id="check1" class="uk-hidden">123</div> <div id="check2" class="uk-hidden">123</div> </div>

    2 answers 2

     $('.result div#'+$chek+'').removeClass('uk-hidden');

    This is the minimum required fix.

    Errors:

    one)

     $('.result div').find($chek)

    Using the selector in brackets, you select the div container inside the result container, and by means of find look inside this div container with id=$chek .

    2) input and div have the same id . And id in turn, is a unique identifier. Not good. Correct the code to semantically correct, a lot of ways in your case. For example:

     <div class="uk-width-6-10 result"> <div class="check1 uk-hidden">123</div> <div class="check2 uk-hidden">123</div> </div> $('.result div.'+$chek+'').removeClass('uk-hidden');

    Next time it is also possible to debug using toggleClass instead of removeClass . It will be seen that changes.

      Your mistake is that you use the same id on the same page.

      jQuery:

       $(document).ready(function($) { $("input").on('click', function() { var chek = $(this).data('id'); $(chek).removeClass('uk-hidden'); console.log(chek); }); });

      HTML:

       <link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/css/uikit.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="uk-width-4-10"> <input id="check1" data-id="#div1" type="radio" name="voice" value="check1" /> <label for="check1">Вариант 1</label> <br /> <input id="check2" data-id="#div2" type="radio" name="voice" value="check2" /> <label for="check2">Вариант 2</label> <br /> </div> <div class="uk-width-6-10 result"> <div id="div1" class="uk-hidden">123</div> <div id="div2" class="uk-hidden">123</div> </div>