JQuery val () and checkboxes

Question

Is there any justification for val() be useless for checkbox controls, while useful for getting input sequentially through all the other controls?

eg. for flags, by default always returns "on" regardless of the state of the flag. For other input controls that don't actually have a value attribute, such as select and textarea, it behaves as you would expect. Cm:

http://jsfiddle.net/jamietre/sdF2h/4/

I cannot think of why it did not return true or false . Otherwise, at least return "on" only when checking, but an empty string is not. Otherwise, at least always return an empty string, given that the flags do not have the value attribute!

Obviously, I know how to get the value with attr , but here is the situation. I am developing a simple (so far) C # jQuery implementation for parsing HTML code on the server, and I try to be completely faithful to the jQuery implementation, so it behaves sequentially either on the client or on the server with the same DOM. But that just seems silly, and it’s not easy for me to force myself to actually encode the “value” to return “on” for the flag no matter what. But if I do not, it will not be consistent. So I'm trying to figure out if there is any reason for this? Does this serve some purpose, or is it just some kind of artifact? Has anyone ever used the val() method against a checkbox, if so, why? If not, why did jQuery architects decide to use this approach to make it not useful?

Answer 1

I can’t think of a good reason why I won’t return true or false. failure that at least return "on" only when checked, but an empty string is not. Otherwise, at least always return an empty string, given that the flags do not have a value attribute!

Flags have a value attribute. It is quite common to use it, for example. multi-checkboxes in forms, for example:

 <input type="checkbox" name="foo[]" value="1" /> <input type="checkbox" name="foo[]" value="2" /> 

Then, when the user submits the form, the server can analyze which flags were checked by checking the values ​​of the foo[] array. The value of the flag does not change whether it is checked or not; the browser simply does not send the values ​​of the checked flags to the server. If you do, for example. $('#your-form').serialize() in jQuery, it should work the same way; it should not include the values ​​of unchecked flags. If you omit the value from the checkbox, it simply defaults to on .

If you want to check if the checkbox for an individual user is checked or not in jQuery, the best descriptive way is $(this).is(':checked')

Answer 2

You say that "flags do not have a value attribute." On the contrary: the value attribute is optional except for flags and a radio window.

From the W3C specification :

[ value attribute] is optional unless the type attribute is set to "radio" or "flag"

on - the default value that your browser provides to the element when ignoring the specification and does not set the value attribute.

You need to remember what the value means: it is sent from the name element to the server when the form is submitted. If it is not set, the value is not sent. Therefore, the on value is sent only when the checkbox is selected.

Answer 3

Maybe this should help

 $(document).ready(function() { $('input[type=checkbox]').click(function() { alert("val="+$(this).val()+",checked="+$(this).attr('checked')); }); }); 

Use input[type=checkbox] to select input type="checkbox" as the checkbox is checked and entered with type = "checkbox"

And add also the value attribute.

Jsfiddle on

UPDATE

 <form method="post" action="#"> PHP<input type="checkbox" name="ch[]" value="PHP"><br/> JS<input type="checkbox" name="ch[]" value="JS"><br/> JAVA<input type="checkbox" name="ch[]" value="JAVA"><br/> PYTHON<input type="checkbox" name="ch[]" value="PYTHON"><br/> <input type="submit" name="submit"/> </form> 

And php

 if($_POST){ foreach($_POST['ch'] as $post => $value){ echo "$post -> $value <br/>"; } } 

They all have the same name, as they are a common group of buttons. You know what has been checked and which did not match their values.

Another way is

 if($_POST){ foreach($_POST as $post => $value){ echo "$post -> $value <br/>"; } } <form method="post" action="#"> PHP<input type="checkbox" name="PHP"><br/> JS<input type="checkbox" name="JS"><br/> JAVA<input type="checkbox" name="JAVA"><br/> PYTHON<input type="checkbox" name="PYTHON"><br/> <input type="submit" name="submit"/> </form> 

But the previous one seems to add more dynamic and less tiring (I would believe).

As for the question @Capsule

 alert("val="+$(this).val()+",checked="+$(this).attr('checked')); <input type="checkbox"> Check me. 

returns the value on , I believe the default value for the checkbox.

And the second experiment also gives the value on .

I hope I'm not mistaken.

Answer 4

If you pass the array to the val function, it will set the flag as noted if the value of the flag matches the value in the array. Source: http://api.jquery.com/val/#val-value

 <input id="checkbox" type="checkbox" value="remember"> $("#checkbox").val(["remember"]); 

Answer 5

Check box

Not always one and its value is transmitted when the form is submitted (otherwise the name / value is not transmitted at all).

It is very useful when creating arrays from flags, you can use name="test[]" as your name and set different values ​​in each. When analyzing the presented result, you get an array containing all the checked values

Answer 6

The flag matters as a text field, and this value is sent to the server when the form is submitted only if the flag was selected during the submission.

Unlike a text field, a flag has a default value of on — it is sent to the server when this flag is set, but has no value , so the processing code may know that it has been selected.

So, the .val() method works just fine, returning the value of the element.

You are correct that there is no easy way in jQuery to see if a certain checkbox / switch is set, something like $("#mycheckbox").checked() , but for what we have plugins. :)