如果我在输入类型文本中写入内容，请选中复选框

Question

我正在尝试制作一个看起来像这样的表单：

其中如果在输入类型=“text”内部是类似数字自动检查CHECKBOX，是jquery？或简单的PHP。

啊，更重要的是，我正在使用woocommerce，所以我做了这样的功能。

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

您可以这样做：

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

演示：http://jsbin.com/anANoSof/1/

清洁解决方案是使用class / id作为text-field以及复选框并使用如下：

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

演示：http://jsbin.com/iWESuTa/1/

根据@Fred，要禁止用户手动点击复选框，只需使用disabled属性，如下所示：

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

演示：http://jsbin.com/iWESuTa/2/

Answer 2

使用此jQuery代码。

考虑您的文本框为tbox，复选框为cbox。

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

keypress是在文本框中输入字符时将触发的功能。

prop函数是jQuery 1.6 +。

Answer 3

好吧，这是一个JS任务（大多数没有重新加载页面的东西都是关于JS）。使用jQuery你需要的代码就像

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