选中时获取单选按钮的值

时间:2018-11-05 23:09:56

标签: jquery

我有下面的代码,单击该代码时必须获取单选按钮的值。如果单击了单选按钮118,则需要获取该单选按钮的值。

$(document).ready(function () {
  var val = $('input[type=radio].list-group-item').find(":checked").val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" style="white-space:nowrap;">       
  <li class="list-group-item">
    <strong>Academic</strong>
  </li>    
  
  <li class="list-group-item">
    <input type="radio" name="Add/Enroll/Open" value="118">Add/Enroll/Open
  </li>    
 
  <li class="list-group-item">
    <input type="radio" name="Grades"value="119">Grades
  </li>    
 
  <li class="list-group-item">
    <input type="radio" name="Graduation/Diploma" value="148">Graduation/Diploma
  </li>    
 
  <li class="list-group-item">
    <input type="radio" name="New Student/Orientation" value="149">New 
 Student/Orientation
  </li>    
 
  <li class="list-group-item">
    <input type="radio" name="Proctor" value="150">Proctor
  </li>    
 
  <li class="list-group-item">
    <input type="radio" name="Semester Exam" value="152">Semester Exam
  </li>    
</ul>

1 个答案:

答案 0 :(得分:0)

您可以通过听单选按钮的单击来获取单选按钮的值。下面的演示使用$(this).val()中的值并将其放在div中。

$(document).ready(function() {
  $('.list-group-item > input[type=radio]').click(function() {
    $("#result").text($(this).val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<UL class="list-group" style="white-space:nowrap;">
  <Li class="list-group-item"><strong>Academic</strong></Li>
  <Li class="list-group-item">
    <input type="radio" name="Add/Enroll/Open" value="118">Add/Enroll/Open</Li>
  <Li class="list-group-item"><input type="radio" name="Grades" value="119">Grades</Li>
  <Li class="list-group-item">
    <input type="radio" name="Graduation/Diploma" value="148">Graduation/Diploma</Li>
  <Li class="list-group-item">
    <input type="radio" name="New Student/Orientation" value="149">New Student/Orientation
  </Li>
  <Li class="list-group-item">
    <input type="radio" name="Proctor" value="150">Proctor</Li>
  <Li class="list-group-item">
    <input type="radio" name="Semester Exam" value="152">Semester Exam</Li>
</UL>
<div id="result" style="background-color:coral;"></div>