Fire link with radio button

Question

I have radio button groups that are connected with links for each of them

These are my links

<ul class="tabs" persist="true">
    <li><a href="#" rel="view1">1</a></li>
    <li><a href="#" rel="view2">2</a></li>
    <li><a href="#" rel="view3">3</a></li>
    <li><a href="#" rel="view4">4</a></li>
    <li><a href="#" rel="view5">5</a></li>
    <li><a href="#" rel="view6">6</a></li>
    <li><a href="#" rel="view7">7</a></li>
    <li><a href="#" rel="view8">8</a></li>
    <li><a href="#" rel="view9">9</a></li>
    <li><a href="#" rel="view10">10</a></li>
    <li><a href="#" rel="view11">11</a></li>
    <li><a href="#" rel="view12">12</a></li>
    <li><a href="#" rel="view13">13</a></li>
    <li><a href="#" rel="view14">14</a></li>
    <li  onclick="Hidden();"><a href="#" rel="view15">15</a></li>
</ul>

And this is one of my radio group

<div class="tabcontents">
    <div id="view1" class="tabcontent">
        <h2>En  Drama </h2>
            <div class="kolon">
                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Calikusu" />
                <label for="Çalkuþu">Çalkuþu</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="GunesiBeklerken" />
                <label for="Güneþi Beklerken">Güneþi Beklerken</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Intikam" />
                <label for="Ýntikam">Ýntikam</label>
                </span></div></p>
                </div>
                <div class="kolon">
                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Karadayi" />
                <label for="Karadayý">Karadayý</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Medcezir" />
                <label for="Medcezir">Medcezir</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="MuhtesemYuzyil" />    
                <label for="Muhteþem Yüzyýl">Muhteþem Yüzyýl</label>
                </span></div></p>
                </div>
            </div>

I need to triger my each links if i select one of radio button from its group

For eg.; If i select one of radio from view1 i want to fire my view2 link.

view2 radio for view3 link and so on..

Thanks for any help! :)

Answer 1

DEMO: http://jsfiddle.net/zp2xkawp/11/

I'm sure someone who is adept in javascript can do this better but this may work (provided I have understood what you need happen). In this scenario, your links need ids that match your radio buttons except have _a appended to them:

CSS (Masks the fact these are links):

a.no-go:link,a.no-go:hover,a.no-go:visited {
    cursor: default;
    color: #333;
    text-decoration: none;
}

HTML (List of links with no-go class and appended ids):

<ul class="tabs" persist="true">
    <li><a href="http://www.example.com" rel="view1" id="view1_a" class="no-go">1</a></li>
    <li><a href="http://www.apple.com" rel="view2" id="view2_a" class="no-go">2</a></li>
    <li><a href="http://www.test.com" rel="view3" id="view3_a" class="no-go">3</a></li>
    <!-- ETC -->
</ul>

<input type="radio" name="test" value="test1" id="view1" /> 
<input type="radio" name="test" value="test2" id="view2" /> 
<input type="radio" name="test" value="test3" id="view3" />

jQuery (stops normal function of links, fetches links by reference):

<script>
$('.no-go').click(function() {
    return false;
});
$("input[name=test]").click(function(){
    // Get the id name and make a reference to the link
    var GetLink     =   "#"+$(this).attr("id")+"_a";
    // Get the href value from the new reference
    var FetchLink   =   $(GetLink).attr("href");
    // Jump to that location...
    window.location =   FetchLink;
    });
</script>

Answer 2

For the anchor click action, I had to dig deep but I think I managed to find a good source for it: native-click-on-an-anchor-tag

$(document).ready( function() { 
    
    $('input[type="radio"').click(function() {
        //the nearest ancestor div with class "tabcontent" obtained
        var id = $(this).closest('div[class="tabcontent"]').attr("id");
        
        //anchor click    
        $('a[rel="' + id + '"').get(0).click( function() {return false});
        
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="tabs" persist="true">
    <li><a href="new.html" rel="view1">1</a></li>
    <li><a href="#" rel="view2">2</a></li>
    <li><a href="#" rel="view3">3</a></li>
    <li><a href="#" rel="view4">4</a></li>
    <li><a href="#" rel="view5">5</a></li>
    <li><a href="#" rel="view6">6</a></li>
    <li><a href="#" rel="view7">7</a></li>
    <li><a href="#" rel="view8">8</a></li>
    <li><a href="#" rel="view9">9</a></li>
    <li><a href="#" rel="view10">10</a></li>
    <li><a href="#" rel="view11">11</a></li>
    <li><a href="#" rel="view12">12</a></li>
    <li><a href="#" rel="view13">13</a></li>
    <li><a href="#" rel="view14">14</a></li>
    <li  onclick="Hidden();"><a href="#" rel="view15">15</a></li>
</ul>
<div class="tabcontents">
    <div id="view1" class="tabcontent">
        <h2>En  Drama </h2>
            <div class="kolon">
                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Calikusu" />
                <label for="Çalkuþu">Çalkuþu</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="GunesiBeklerken" />
                <label for="Güneþi Beklerken">Güneþi Beklerken</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Intikam" />
                <label for="Ýntikam">Ýntikam</label>
                </span></div></p>
                </div>
                <div class="kolon">
                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Karadayi" />
                <label for="Karadayý">Karadayý</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="Medcezir" />
                <label for="Medcezir">Medcezir</label>
                </span></div></p>

                <p><div id="genc"><span>
                <input name="dizi" type="radio" value="MuhtesemYuzyil" />    
                <label for="Muhteþem Yüzyýl">Muhteþem Yüzyýl</label>
                </span></div></p>
                </div>
            </div>