Question

我有一个复选框，单击该复选框时，输入值为1。如果未选中，则该值为0。没关系。

输入仅接受数字，验证正常。我希望它以某种方式工作，即当值为0时，不会选中该复选框。

当我使用一位或多于两位的值时，我的示例有时会失败。

  jQuery(document).on('keypress keyup blur', 'input.e-qty', function (event) {
        if ((((event.which > 47) && (event.which < 58)) || (event.which == 13)) ) {
            var qty = jQuery(this).val();
            if(qty.length == 1 && qty == 0){
                jQuery('.product').trigger('click');
            }

            return true;
        }
        return false;        
    });


    jQuery(document).on("change", ".product", function () {
        var id = this.id.split("_").pop();
        var qty = jQuery('#qty_' + id);

        qty.val(+this.checked);

    });

https://jsbin.com/patekocuya/1

Answer 1

此外，您还可以使用attr属性，因为属性也可以在运行时更改，因此您的代码应如下所示。

jQuery(document).on('keypress keyup blur', 'input.e-qty', function (event) {
        if ((((event.which > 47) && (event.which < 58)) || (event.which == 13)) ) {
            var qty = Number(jQuery(this).val());

            if(qty == 0){

                $('.product').attr('checked', true);

            }else{

                $('.product').attr('checked', false);
            }

            return true;
        }
        return false;        
    });

注意

还要注意，检查类是否在使用时，最好告诉页面所引用的复选框，因为类引用会返回一个集合。使用此方法，您可以直接修改HTMLInputElement s的属性

因此您的代码变为-

 $('.product')[0].checked = true;
 or
 $('.product')[0].checked = false;

Answer 2

使用prop()功能而不是单击

添加不等于0且为true的else语句
只需使用parseFloat即可解决数字问题

已更新

https://jsbin.com/coqutuzizo/1/edit?html,js,console,output

 jQuery(document).on('keypress keyup keydown blur', 'input.e-qty', function (event) {
    if ((((event.which > 47) && (event.which < 58)) || (event.which == 13) || (event.which == 8)) ) {
        var qty = parseFloat(jQuery(this).val());
        if(qty === 0 || !$.trim($(this).val())){
            jQuery('.product').prop('checked',false);
        }else{
            jQuery('.product').prop('checked',true);

        }

        return true;
    }
    return false;        
});

Answer 3

you are looking for https://jsfiddle.net/qwy7ausj/

jQuery(document).on('keypress keyup blur', 'input.e-qty', function(event) {

var qty = jQuery(this).val();
if (qty != 0) {

    jQuery('.product').prop('checked', true);
} else {
    jQuery('.product').prop('checked', false);
}

});

Answer 4

您应将keypress和keyup分开，否则将获得双精度值。

在这里我给你做了一个例子。

jQuery(document).on('keypress', 'input.e-qty', function (event) {
        if ((((event.which > 47) && (event.which < 58)) || (event.which == 13)) ) 
            return true;

        return false;        
    });


jQuery(document).on('keyup', 'input.e-qty', function (event) {
            var qty = $(this).val();
            if(qty != "" ){
               var i = parseInt(qty);
                  jQuery('.product').prop("checked", i>0).trigger("change")
                }
    });
    
   jQuery(document).on("change", ".product", function () {
        var id = this.id.split("_").pop();
        jQuery('#qty_' + id).val(+this.checked).focus().select(); ;
      
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="chk_1" class="product">
<input type="text" class="e-qty" name="qty" id="qty_1" value="0">

当值为0时，更改复选框-仅输入数字

4 个答案: