javascript - check inputfields on pageload and manipulate with jquery -

when press add, show hidden #box, hide add button , show remove button.

html:

<input type="button" id="add" value="add"> <input type="button" class="no-display" id="remove" value="remove">  <div class="no-display" id="box">     <input id="a" value="" type="text" />     <input id="b" value="" type="text" />     <input id="c" value="" type="text" /> </div> 

jquery:

$('#add,#remove').click(function () {     $('#add').toggle();     $('#remove').toggle();     $('#box').slidetoggle("fast"); }); 

see working demo

now, want check if input fields #a or #b or #c have value. if have value, on pageload want show #box, hide #add button , show #remove button.

what best way this?

you can see demo here (not finished)

using filter() count of input has value on it... if count greater 0 ..means atleast 1 input not empty so.. hide add, show remove buttons , container

try this

$('#add,#remove').click(function () {   $('#add').toggle();   $('#remove').toggle();   $('#box').slidetoggle("fast"); });  var count = $('#a,#b,#c').filter(function () {   return $(this).val().length > 0; }).length;  if (count > 0) {   $('#box').show();   $('#add').hide();   $('#remove').show(); } 

updated per comment

var count = $('#a,#b,#c').filter(function () {   return this.value.length > 0; //faster  }).length;     

working fiddle