Changing href depending on which radio button is checked-CodePudding

I have made this table getting help from same issues that are posted on stack. I have a table that changes the buy link according to which radio button is selected. Every button should do the same thing and go to link regardless of which row they are.

But I have the problem that just the first button works. It is obviously because I am selecting the button tag with its id but when I change it to select by class name or query selector all it won't work at all

it would be great if someone can help me with it.

@import url(https://fonts.googleapis.com/css?family=Open Sans:400,700);
a:link {
    text-decoration: none;
    outline: none;
    transition: all 0.25s;
}

a:visited,
a:link:hover,
a:visited:hover {
    text-decoration: none;
}

body {
    background: #eee none repeat scroll top left;
    color: #444;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    position: relative;
    line-height: normal;
    direction: rtl;
    text-align: right;
}

.container {
    background: #fff;
    max-width: 520px;
    margin: 4% auto;
    padding: 20px;
    font-family: 'Open Sans', sans-serif;
    border-radius: 5px;
    overflow: hidden;
}

.container h2 {
    background: #fff;
    position: relative;
    overflow: hidden;
    margin: 0 0 20px 0;
    font-size: .8em;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    vertical-align: middle;
    padding: 0 12px 20px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body {
    background: #f5f5f5;
    font-family: "Roboto", sans-serif;
    margin: 0;
    padding: 0;
    position: relative;
    line-height: normal;
    text-align: right;
}

.container {
    max-width: 768px;
    margin: 4% auto;
    padding: 40px;
    background: #fff;
    color: #222;
    font-size: 16px;
    line-height: 1.6;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}

.container h1,
.container h2 {
    display: block;
    margin-bottom: 40px;
    font-size: 2rem;
    font-weight: 700;
    color: #222;
}

.container h2 {
    margin-top: 30px;
}


/* Table Post Responsive */

table,
caption,
tbody {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-align: right;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.post-body table td,
.post-body table caption {
    border: 1px solid #e9e9e9;
    padding: 7px;
    text-align: left;
    vertical-align: top;
    text-align: right;
}

.post-body table tr th {
    border: 1px solid #006AC2;
    color: #fff;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    font-size: 16px;
    text-align: right;
}

.post-body table th {
    background: #006AC2;
}

.post-body table tr th:hover {
    background: #006AC2
}

.post-body table.tr-caption-container {
    border: 1px solid #f6f8f9;
}

.post-body table caption {
    border: none;
    font-style: italic;
}

.post-body td,
.post-body th {
    color: #57606f;
    vertical-align: top;
    text-align: left;
    font-size: 15px;
    padding: 3px 5px;
}

.post-body table tr:nth-child(even)>td {
    background-color: #ecf0f1;
}

.post-body table tr:nth-child(odd)>td {
    background-color: #f6f8f9;
}

.post-body td a {
    color: #768187;
    padding: 0 6px;
    font-size: 85%;
    float: right;
    display: inline-block;
    border-radius: 3px
}

.post-body td a:hover {
    color: #7f9bdf;
    border-color: #adbce0;
}

.post-body td a[target="_blank"]:after {
    margin-left: 5px;
}

.post-body table.tr-caption-container td {
    border: none;
    padding: 8px;
}

.post-body table.tr-caption-container,
.post-body table.tr-caption-container img,
.post-body img {
    max-width: 100%;
    height: auto;
}

.post-body td.tr-caption {
    color: #666;
    font-size: 80%;
    padding: 0px 8px 8px !important;
}

table {
    max-width: 100%;
    width: 100%;
    margin: 1.5em auto;
}

table.section-columns td.first.columns-cell {
    border-left: none
}

table.section-columns {
    border: none;
    table-layout: fixed;
    width: 100%;
    position: relative
}

table.columns-2 td.columns-cell {
    width: 50%
}

table.columns-3 td.columns-cell {
    width: 33.33%
}

table.columns-4 td.columns-cell {
    width: 25%
}

table.section-columns td.columns-cell {
    vertical-align: top
}

table.tr-caption-container {
    padding: 4px;
    margin-bottom: .5em
}

td.tr-caption {
    font-size: 80%
}

.post-body table tr:hover td {
    background: #b0b1b4;
    color: #FFFFFF;
    border-top: 1px solid #22262e;
}

table tr:nth-child(odd):hover td {
    background: #b0b1b4;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./main.css">
    <title>Document</title>
</head>

<body>
    <div >
        <HTML>

        <body>
            <div >
                <table cellpadding="0" cellspacing="0" style="text-align: left;">
                    <tbody>
                        <tr>
                            <th>name</th>
                            <th>name2</th>
                            <th>name3</th>
                            <th>name4</th>

                        </tr>
                        <tr>
                            <td>consequatur temporibus, aspernatur cupiditate magni enim molestias ani</td>
                            <td><input name="slider" id="slide3" data-href="ww1" type="radio" /> 340000 </td>
                            <td><input name="slider" id="slide3" data-href="ww2" type="radio" /> 340000 </td>
                            <td>
                                <div id="down_icon2"><a href="">buy </a></div>
                            </td>


                        </tr>
                        <tr>
                            <td>consequatur temporibus, aspernatur cupiditate magni enim molestias ani</td>

                            <td><input name="slider" id="slide3" data-href="ww3" type="radio" /> 340000</td>
                            <td><input name="slider" id="slide3" data-href="ww4" type="radio" /> 340000</td>
                            <td>
                                <div id="down_icon2"><a href="">buy</a></div>
                            </td>

                        </tr>
                        <tr>
                            <td>consequatur temporibus, aspernatur cupiditate magni enim molestias ani</td>
                            <td><input name="slider" id="slide3" data-href="ww5" type="radio" /> 340000</td>
                            <td><input name="slider" id="slide3" data-href="ww6" type="radio" /> 340000</td>
                            <td>
                                <div id="down_icon2"><a href="">buy</a></div>
                            </td>

                        </tr>
                    </tbody>
                </table>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>   
                <script>
                var sliders = document.getElementsByName('slider');
                var linkWrapper = document.getElementById('down_icon2');

                for (var i in sliders){
                if(sliders[i].addEventListener){
                    sliders[i].addEventListener('click', function(){
                    linkWrapper.childNodes[0].setAttribute('href', this.getAttribute('data-href'));
                    });
                }
                }
                </script>
        </body>

        </html>

CodePudding user response：

This is how you would approach the problem with jQuery:

Get all of the slider elements using $('[name=slider]')
Add click listeners to each using .on('click', function() {...})
Store the link you need from the data attribute $(this).data('href')
Relative to the slider, we then find the closet containing table row using $(this).closest('tr')
And then find the link in that row .find('.link') (Notice that I've added the link class to each <a>)
Set the new href .prop('href', link)

$(document).ready(function() {
  $('[name=slider]').on('click', function() {
    const link = $(this).data('href')
    $(this).closest('tr').find('.link').prop('href', link)
  })
})

<table>
  <tbody>
    <tr>
      <th>name</th>
      <th>name2</th>
      <th>name3</th>
      <th>name4</th>
    </tr>
    <tr>
      <td>1</td>
      <td><input name="slider" id="slide3" data-href="ww1" type="radio" /> 340000 </td>
      <td><input name="slider" id="slide3" data-href="ww2" type="radio" /> 340000 </td>
      <td>
        <div id="down_icon1"><a href="" >buy </a></div>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td><input name="slider" id="slide3" data-href="ww3" type="radio" /> 340000</td>
      <td><input name="slider" id="slide3" data-href="ww4" type="radio" /> 340000</td>
      <td>
        <div id="down_icon2"><a href="" >buy</a></div>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td><input name="slider" id="slide3" data-href="ww5" type="radio" /> 340000</td>
      <td><input name="slider" id="slide3" data-href="ww6" type="radio" /> 340000</td>
      <td>
        <div id="down_icon3"><a href="" >buy</a></div>
      </td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>