Making sure a checkbox stays checked when a text input is not empty?

Question

I'm trying to keep a checkbox checked whenever a given text input is not empty. At the moment, the text input box isn't responding to the event I added to it through jquery, and I'm wondering if there's something off in my code. (still quite new to jquery)

Here is my text input and checkbox:

<input type="text" id="textInput"/>

<input type="checkbox" id="checkBox" checked="checked" />

And here is my jquery code:

$('#textInput').on('click', function(){
    //if text input is not empty 
    if($('#textInput').val() !== ''){
        //if checkbox not checked, check it
        if($('checkBox').checked !== 'checked'){
            $('checkBox').checked = 'checked';
        }
    }
})

hey. man! you should pay attention to selectors and learn how to debug you code. I'll provide possible solution below — Alex
– Alex, Commented Jul 12, 2021 at 14:21

Kinglish · Accepted Answer · 2021-07-12 14:14:35Z

1

You can affect the checkbox checked state via .prop() - and in this case we can just set it to the truthy $('#textInput').val() !== ''.

$('#textInput').on('blur', function() {
  $('#checkBox').prop('checked', $('#textInput').val().trim() !== '');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="textInput" />
<input type="checkbox" id="checkBox" checked="checked" />

answered Jul 12, 2021 at 14:14

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex · Accepted Answer · 2021-07-12 14:25:20Z

0

You should call function to check on page load(ready), and every text field change. I didn't test my solution, but it should be fine

const textInput = $('#textInput');
const checkbox = $('#checkBox');

function setCheckboxState() {
  const text = textInput.val();
  if (text) {
    checkbox.prop('checked', true);
  }
}

setCheckboxState();
textInput.on('focus change keyup', setCheckboxState);

answered Jul 12, 2021 at 14:25

Alex

1317 bronze badges

Collectives™ on Stack Overflow

Making sure a checkbox stays checked when a text input is not empty?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related