Check checkbox if i write something in a input type text

Question

I’m trying to make a form that looks like this:

where if inside of the input type ="text" is something like a number auto-check the CHECKBOX, is jquery? or simple PHP.

Ahh, the more important thing, I'm using woocommerce, so i make the function like that.

add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');


function my_custom_checkout_field( $checkout ) {




    woocommerce_form_field( 'losung', array( 
        'type'          => 'text', 
        'class'         => array('my-field-class'), 

        'label'         => __('titel'), 
        'placeholder'   => __('Enter a number'),
        ), $checkout->get_value( 'my_field_name' ));
        echo '<div class="spiele-container">';
        echo '<input class="input-checkbox pull-left" id="" type="checkbox" name="ter">';
        echo '<div id="text-container-spiele">text ';
    echo '</div>';
    echo '</div>';

}

Answer 1

You can do something like this :

HTML :

<input type="text" class="something" />
<br>  
<input type="checkbox" name="check" class="check">

JS:

$("input[type='text']").on("keyup", function(){
    if(this.value!=""){
        $("input[type='checkbox']").prop("checked", "checked");
    }else{
        $("input[type='checkbox']").prop('checked', ""); 
    }
});

Demo : http://jsbin.com/anANoSof/1/

Cleaner solution would be to use a class/id for the text-field as well as the checkbox and use like :

HTML :

<input type="text" class="num" />
<br>  
<input type="checkbox" name="check" class="check">

JS:

$(".num").on("keyup", function(e){
    if(this.value!=""){
        $(".check").prop("checked", "checked");
    }else{
        $(".check").prop('checked', ""); 
    }
});

Demo : http://jsbin.com/iWESuTa/1/

As per @Fred, to disable the user from clicking the checkbox manually, simply use the disabled attribute as follows :

 <input type="checkbox" disabled name="check" class="check">

Demo : http://jsbin.com/iWESuTa/2/

Answer 2

Use this jQuery code.

consider you have id tbox for textbox and id cbox for checkbox.

$( "#tbox" ).keypress(function() {
    $('#cbox').prop('checked', true);
});

keypress is the function that will trigger when a character is entered in the textbox.

the prop function is jQuery 1.6+.

Answer 3

well, this a JS task ( mostly everything going on without page reload is about JS). Using jQuery the code u need is something like

$(function(){
  $('.my-field-class').keyup(function(){
    var $cb =  $(this).parents('form:eq(0)').find('.input-checkbox');
    if(this.value != '')
      $cb.attr('checked', 'checked');
    else
      $cb.removeAttr('checked');
  });
});