CODEWITHSUNDEEP
jqueryhtmlspring-mvc
boycod3
boycod3

Reputation: 5317

Jquery get value by radio button click

From my below html code ,i want values by click on radio button using jquery. i already go class="tech" text by using tech : $(this).closest('td').siblings('td.tech').text()

1.Get clicked radion button value,text

2.When i clicked a radio button get its table head (class="factor")

  <table id="listTable" class="table table-striped">
            <thead>
                <tr>
                    <th>Skill ID</th>
                    <th>Skill Name</th>
                    <c:forEach items="${skillfactors}" var="skillfact" varStatus="j">
                        <th class="factor">${skillfact.factorName}</th>
                    </c:forEach>

                </tr>
            </thead>
            <tbody>
                <c:forEach items="${technologies}" var="tech" varStatus="i">
                    <tr>

                        <td nowrap="nowrap">${tech.id}&nbsp;</td>
                        <td nowrap="nowrap" class="tech">${tech.name}&nbsp;</td>


                        <c:forEach items="${skillfactors}" var="skillfact" varStatus="l">
                            <td nowrap="nowrap"><c:forEach items="${ratingList}"
                                    var="ratings" varStatus="k">

                                    <!-- working code -->
                                    <input type="radio" name="${tech.id}+${skillfact.id}"  class="rating"/>${ratings.name}

                        <br>

                                </c:forEach></td>
                        </c:forEach>

                    </tr>
                </c:forEach>

            </tbody>
        </table>

enter image description here

Already got skillName.Now i want Radio button clicked value & it's table heading

Upvotes: 0

Views: 670

Answers (2)

mahendra rajeshirke
mahendra rajeshirke

Reputation: 122

Try this

jsfiddle

<table>
    <tr class="head">
        <td class="tab1">one</td>
        <td class="tab2">two</td>
        <td class="tab3">three</td>
    </tr>
    <tr class="data">
        <td><input type="radio" name="one"><lable>data one</lable></td>
        <td><input type="radio" name="one"><lable>data two</lable></td>
        <td><input type="radio" name="one"><lable>data three</lable></td>
    </tr>
</table>

$(function(){
    var table_td_head = $('table').find('tr.head td').length;
    var table_td_data = $('table').find('tr.data td').length;
    $("input[type='radio']").each(function(){        
        $(this).click(function(){
          //alert($(this).next().text());
          var table_inner_td_index = $(this).parent().index();
            alert(table_inner_td_index);
            alert($("table tr.head td:nth-child("+table_inner_td_index+")").attr('class'));
       });
    });
});

Upvotes: 0

giulp
giulp

Reputation: 2408

As said in Arun P Johny's comment above:

If you are doing it in the click handler of the radio then this.value should give you the value... else try 

$(this).closest('td').find(':checked').val()

To get factorName, if the code for the template can be modified, you could put a data-factorName attribute in the option itself like:

<input 
  type="radio" 
  name="${tech.id}+${skillfact.id}" 
  data-factorName="${skillfact.factorName}" 
  class="rating"/>
...

and access it like this

$(':radio').on('click', function(){
  var skillFactorName = $(this).data('factorName');
});

faster and more readable than other solutions imho

Upvotes: 1

Related Questions