Good time of day, Please tell me, how can I check the checkbox with a certain id value when clicking on a link with the same data attribute value? Example:

<a href="javascript:void(0);" data-id="continent-1">Африка</a> <a href="javascript:void(0);" data-id="continent-2">Азия</a> <a href="javascript:void(0);" data-id="continent-3">Европа</a> ... <input type="checkbox" id="continent-1"> <input type="checkbox" id="continent-2"> <input type="checkbox" id="continent-3">

    2 answers 2

     $("a[data-id]").click(function(e){ var $check = $("#" + $(this).data("id")); $check.prop("checked", !$check.prop("checked")); }); 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="javascript:void(0);" data-id="continent-1">Африка</a> <a href="javascript:void(0);" data-id="continent-2">Азия</a> <a href="javascript:void(0);" data-id="continent-3">Европа</a> ... <input type="checkbox" id="continent-1"> <input type="checkbox" id="continent-2"> <input type="checkbox" id="continent-3">

    Wouldn't it be better to use a label with a for attribute?

    • label - this is the first thing I tried) Unfortunately, if I could, I would have done so. I have an SVG map, I need to make clickable continents, the label didn’t want to work there, only the links. Thanks for the code, everything works as it should) - Oleg Lantukh 10:10
    • @OlegLantukh Please. Successes! - Igor

    There are a lot of similar questions. For example, my . There is no need for JS . Just need to add styling through CSS . And everything works without the <a> tag.

    PS It looks better with the selection turned off.

     .ml{ color:darkblue; user-select: none; } .ml:hover{ color:blue; } 
     <label class="ml" for="Africa"> Африка </label> <label class="ml" for="Asia"> Азия </label> <label class="ml" for="Europe"> Европа </label> <input type="checkbox" id="Africa"> <input type="checkbox" id="Asia"> <input type="checkbox" id="Europe">

    • Thanks for the help, in my case the label does not fit, I need to fasten the map to the filter) in general, everything is difficult) I have already found a solution, but thanks anyway! - Oleg Lantukh pm