Question

我的网页上有一个评级模块：

<div class="rating">
   <label for="rate_1"class="glyphicon glyphicon-star"><input type="radio" id="rate_1" name="rating" value="1"></label>
   <label for="rate_2"class="glyphicon glyphicon-star"><input type="radio" id="rate_2" name="rating" value="2"></label>
   <label for="rate_3"class="glyphicon glyphicon-star"><input type="radio" id="rate_3" name="rating" value="3"></label>
   <label for="rate_4"class="glyphicon glyphicon-star"><input type="radio" id="rate_4" name="rating" value="4"></label>
   <label for="rate_5"class="glyphicon glyphicon-star"><input type="radio" id="rate_5" name="rating" value="5"></label>
</div>

当我点击第4或第5颗星时，我希望在验证中检查已验证的无线电：

<ul class="validation">
     <li class="success-hover"><label for="id_validation_1"><input class="success" type="radio" id="id_validation_1" name="validation"><i class="fa fa-check"></i>Validated</label></li>
     <li class="danger-hover"><label for="id_validation_2"><input class="danger" type="radio" id="id_validation_2" name="validation"><i class="fa fa-close"></i>Rejected</label></li>
     <li class="info-hover"><label for="id_validation_3"><input type="radio" id="id_validation_3" name="validation"><i class="fa fa-spinner"></i>Partially completed</label></li>
     <li class="warning-hover"><label for="id_validation_4"><input type="radio" id="id_validation_4" name="validation"><i class="fa fa-clock-o"></i>Expired</label></li>
</ul>

我从一些Jquery代码开始：

if ($("input[name=rating][value=4]").prop('checked', true)||$("input[name=rating][value=5]").prop('checked', true)) {
    $('.success').prop('checked', true);
}
else $('.success').prop('checked', false);

但它不起作用......请帮助我！ ^^

Answer 1

您的if语句使用的是prop() setter，而不是getter。

另请注意，您可以缩短选择器，因为无线电输入具有id属性，您可以使用单个调用来设置.success checked属性作为您的结果condition是一个布尔值。试试这个：

$('.success').prop('checked', $("#rate_4").prop('checked') || $("#rate_5").prop('checked'));

Answer 2

您可以使用.is(":checked")检查是否已选中无线电输入或不。
.prop('checked', true)不能在条件语句中使用，因为它不返回布尔结果。它用于将单选按钮的状态设置为已选中。

http://jsfiddle.net/02gocfr1/

<强> JQUERY

$(function () {
    $("input[name=rating]").change(function () {
        if ($("input[name=rating][value=4]").is(":checked") || $("input[name=rating][value=5]").is(":checked")) {
            $('.success').prop('checked', true);
        } else $('.success').prop('checked', false);
    })
})

评级模块进行输入无线电更改

2 个答案: