如何验证是否已检查输入以及如何显示输入编号

时间:2019-05-20 08:22:35

标签: javascript jquery

我正在研究星级。我在Codepen重用了Olga的代码。我想动态显示用户选择的比率,例如:“您给此产品的价格为:3/5”。

我从JS和jQuery开始,所以我的想法受到限制;我只是为了测试而尝试过,但没有显示任何内容

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
</head>
<div class="row">
  <fieldset class="rate">
    <input class="rate2-star5" type="radio" name="rate2" value="5" />
    <label for="rate2-star5" title="Awesome">5</label>

    <input class="rate2-star4" type="radio" name="rate2" value="4" />
    <label for="rate2-star4" title="Very good">4</label>
  </fieldset>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
UIbezierpath

这就是我想要的结果:https://imgur.com/a/07X9qgP

2 个答案:

答案 0 :(得分:1)

使用以下jquery示例,我认为它将为您提供帮助。

$(document).on('change', '.rate2-star5', function() {
  var el = $(this);
  var is_checked = el.is(':checked');
  alert(is_checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>


<div class="row">
  <fieldset class="rate">

    <input class="rate2-star5" type="checkbox" name="rate2" value="5" />
    <label for="rate2-star5" title="Awesome">5</label>

  </fieldset>
</div>

答案 1 :(得分:0)

您可以使用以下片段,这些片段基本上是从原始jQuery代码派生的:

$("input[type='radio']").click(function() {
  if ($(this).is(':checked')) {
    alert($(this).val());
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <fieldset class="rate">
    <input class="rate2-star5" type="radio" name="rate2" value="5" />
    <label for="rate2-star5" title="Awesome">5</label>

    <input class="rate2-star4" type="radio" name="rate2" value="4" />
    <label for="rate2-star4" title="Very good">4</label>
  </fieldset>
</div>

说明:

您需要在单击或更改单选按钮时触发此代码,然后只有您会看到警报。