All geek questions in one place

Override checkbox in javascript using jQuery

Help setting modulation flags. I have this page:

<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function() { $('<div><input type="checkbox" name="makeHidden" id="makeHidden" checked="checked" />Make Hidden</div>').appendTo('body'); $('<div id="displayer" style="display:none;">Was Hidden</div>').appendTo('body'); $('#makeHidden').click(function() { var isChecked = $(this).is(':checked'); if (isChecked) { $('#displayer').hide(); } else { $('#displayer').show(); } return false; }); }); </script> </head> <body> </body> </html>

This does not work due to return false; in the click handler. If I remove it, it works fine. The problem is that if I pulled the click function into my own function and unit test with qunit, it will not work without return false;

[EDIT] Using @patrick answers my results:

Firefox:

  • A manual test for a toy is good.
  • Unit tests are good.
  • Manually checking a production application is good.

Internet Explorer:

  • A manual test for a toy is a failure.
  • Unit tests are good.
  • A manual test of a production application is a failure.

Internet Explorer requires first, with one click. then two clicks are required.

I thought jQuery is an abstraction of browsers?

Do I have to override the behavior of the entire field to solve?

In my unit tests, this is how I do the user flag simulation:

 $(':input[name=shipToNotActive]').removeAttr('checked'); $('#shipToNotActive').change();

and:

 $(':input[name=shipToNotActive]').attr('checked', 'checked'); $('#shipToNotActive').change();
+1
source share
3 answers

How to use change instead of click ?

 $('#makeHidden').change(function() { var isChecked = $(this).is(':checked'); if (isChecked) { $('#displayer').hide(); } else { $('#displayer').show(); } return false; });

return false; will not work because the event is fired as a result of a change.

+4
source

Here is the work.

Now my code looks like this:

  if ($.browser.msie) { $('#makeHidden').change(function () { this.blur(); this.focus(); onCheckboxClicked(); }); } else { $('#makeHidden').change(function() { return onCheckboxClicked(); }); }

All my tests, including a hand-made toy and hand-made, are good.

Does anyone have anything better than this hack?

+2
source

Try the following:

 $(function() { $('<div><input type="checkbox" name="makeHidden" id="makeHidden" checked="checked" />Make Hidden</div>').appendTo('body'); $('<div id="displayer" style="display:none;">Was Hidden</div>').appendTo('body'); $('#makeHidden').click(function() { return onCheckboxClicked(this) } ); }); function onCheckboxClicked(el) { var isChecked = $(el).is(':checked'); if (isChecked) { $('#displayer').hide(); } else { $('#displayer').show(); } return false; }
0
source

Source: https://habr.com/ru/post/1310747/

More articles:


All Articles