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 woomerce, so i make the function like that.

add_action('woomerce_after_order_notes', 'my_custom_checkout_field');


function my_custom_checkout_field( $checkout ) {




    woomerce_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>';

}

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 woomerce, so i make the function like that.

add_action('woomerce_after_order_notes', 'my_custom_checkout_field');


function my_custom_checkout_field( $checkout ) {




    woomerce_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>';

}

• javascript
• php
• jquery
• wordpress
• woomerce

• can you provide a fiddle or something? – user2897690 Commented Feb 3, 2014 at 14:52
• 1 Nothing to do with PHP in this case, it's a jquery/javascript thing. – Populus Commented Feb 3, 2014 at 14:56

3 Answers 3

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./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./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./iWESuTa/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+.

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