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

Question

I have a checkbox that when clicked has an input value of 1. When it is unchecked the value is 0. That is ok.

The input only accepts digits, the validation is ok. I want it to work in a way that when the value is 0 the checkbox is not checked.

My example sometimes fails when I play with values of one digit, or more than two.

  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

Additionally you can use the attr property, since attributes could be altered at runtime also, therefore your code would look like this..

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;        
    });

Note

Also take note that checking if you are working with classes it is best to tell the page which checkbox you are referring to since class referencing returns a collection. using this method you could modify the HTMLInputElement s property directly,

therefore your code becomes -

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

Answer 2

Use prop() function instead of click

1. Add else statement with not equal 0 with checked true
2. Just use parseFloat for the numeric problem

Updated

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

Is this what 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

You should seperate keypress and keyup otherwise you will get a double value.

Here i made you an example.

 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">