javascript - 想要使用 jquery 获取最近的内部选中单选按钮的值

Question

想要使用 jquery 获取最近的内部选中单选按钮的值：

我的代码片段：

HTML 代码片段：

<div class="rating" data-islogin="<?php echo $this->session->userdata('vhkrt_clt_logged_in')==TRUE ? 1:0;?>" data-userid="<?=$cltId?>" data-prodid="<?=$prod->prod_id?>">
    <input type="radio" id="star5_<?=$prod->prod_id?>" name="rating" value="5" />
    <label class = "full" for="star5_<?=$prod->prod_id?>"></label>
    <input type="radio" id="star4_<?=$prod->prod_id?>" name="rating" value="4" />
    <label class = "full" for="star4_<?=$prod->prod_id?>"></label>
</div>

jQuery 代码片段：

$('.rating').click(function(){
    var rating = $(this).closest('input[name = rating]:checked').value;
    alert(rating); //getting "undefined"
})  

我正在尝试上面的代码片段，但我得到的评级值是“未定义”的警报

请建议我正确的声明来检查单选按钮的值。

由于某些情况，我不想实现单选按钮的“onchange”事件。

标签： javascriptjquery

Answer 1

jQueryclosest 用于查询祖先，在您的情况下，您需要子标签。你可以children改用

$('.rating').click(function(){
    var rating = $(this).children(`input[name = 'rating']:checked`).val();
    alert(rating);
})  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="rating" data-islogin="<?php echo $this->session->userdata('vhkrt_clt_logged_in')==TRUE ? 1:0;?>" data-userid="<?=$cltId?>" data-prodid="<?=$prod->prod_id?>">
    <input type="radio" id="star5_<?=$prod->prod_id?>" name="rating" value="5" />
    <label class = "full" for="star5_<?=$prod->prod_id?>"></label>
    <input type="radio" id="star4_<?=$prod->prod_id?>" name="rating" value="4" />
    <label class = "full" for="star4_<?=$prod->prod_id?>"></label>
</div>