How to Add values of checkboxes to the input text field?
We stored the checkboxes value in a variable $checks, after that attach the handler to this collection. Inside the event handler, I take the collection once again and filter (return) only the checkboxes that are checked.
Jquery
|
1 2 3 4 5 6 7 8 9 10 11 |
$(<span class="hljs-variable language_">document</span>).<span class="hljs-title function_">ready</span>(<span class="hljs-keyword">function</span>(){ $checksbx = $(<span class="hljs-string">":checkbox"</span>); $checksbx.<span class="hljs-title function_">on</span>(<span class="hljs-string">'change'</span>, <span class="hljs-keyword">function</span>() { <span class="hljs-keyword">var</span> string = $checksbx.<span class="hljs-title function_">filter</span>(<span class="hljs-string">":checked"</span>).<span class="hljs-title function_">map</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">i,v</span>){ <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">value</span>; }).<span class="hljs-title function_">get</span>().<span class="hljs-title function_">join</span>(<span class="hljs-string">" "</span>); $(<span class="hljs-string">'#results'</span>).<span class="hljs-title function_">val</span>(string); }); }); |
|
1 2 3 4 5 6 |
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"results"</span>/></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"1"</span>></span>1<span class="hljs-tag"><<span class="hljs-name">br</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"2"</span>></span>2<span class="hljs-tag"><<span class="hljs-name">br</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"3"</span>></span>3 |
|
1 |
Share this:
htmlAdmin2609 Changed status to publish December 6, 2021
Write your answer.
Related Post
