jquery 如何使用JavaScript检查用户选择了哪个单选按钮

slmsl1lt  于 2023-06-22  发布在  jQuery
关注(0)|答案(3)|浏览(157)

我有一个代码,我从 Bootstrap ,我想知道如何获得单选按钮的值,当用户点击它。

<div class="d-flex justify-content-center">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="5">
            <label class="form-check-label" for="inlineRadio1">5 stars</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="4">
            <label class="form-check-label" for="inlineRadio2">4 stars</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
            <label class="form-check-label" for="inlineRadio3">3 stars</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="2">
            <label class="form-check-label" for="inlineRadio3">2 stars</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="1">
            <label class="form-check-label" for="inlineRadio3">1 star</label>
          </div>
        </div>
nnt7mjpx

nnt7mjpx1#

您可以将click事件附加到单选按钮,使用this关键字访问单击的单选按钮的值:

$(':radio').click(function(r){
  console.log(this.value);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex justify-content-center">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="5">
    <label class="form-check-label" for="inlineRadio1">5 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="4">
    <label class="form-check-label" for="inlineRadio2">4 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
    <label class="form-check-label" for="inlineRadio3">3 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="2">
    <label class="form-check-label" for="inlineRadio3">2 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="1">
    <label class="form-check-label" for="inlineRadio3">1 star</label>
  </div>
</div>
dtcbnfnu

dtcbnfnu2#

您可以获取所有具有相同名称的radio元素,然后添加事件侦听器以获取选中的项

[...document.getElementsByName('inlineRadioOptions')].forEach(item => {

  item.addEventListener('change', (e) => {
    if (e.target.checked) {
      console.log(e.target.value)
    }

  })
})
<div class="d-flex justify-content-center">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="5">
    <label class="form-check-label" for="inlineRadio1">5 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="4">
    <label class="form-check-label" for="inlineRadio2">4 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
    <label class="form-check-label" for="inlineRadio3">3 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="2">
    <label class="form-check-label" for="inlineRadio3">2 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="1">
    <label class="form-check-label" for="inlineRadio3">1 star</label>
  </div>
</div>
pkbketx9

pkbketx93#

您可以使用此jQuery来获取值

<div class="d-flex justify-content-center">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="5">
    <label class="form-check-label" for="inlineRadio1">5 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="4">
    <label class="form-check-label" for="inlineRadio2">4 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
    <label class="form-check-label" for="inlineRadio3">3 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="2">
    <label class="form-check-label" for="inlineRadio4">2 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="1">
    <label class="form-check-label" for="inlineRadio5">1 star</label>
  </div>
</div>
    <script>
      $(document).ready(function() {
        $('input[name="inlineRadioOptions"]').on('click', function() {
          var selectedValue = $(this).val();
          console.log(selectedValue); // Display the selected value in the browser console
        });
      });
    </script>

相关问题