Welcome Guest, Not a member yet? Register   Sign In
jQuery: check/uncheck all checkboxes with specific value
#1

[eluser]codex[/eluser]
Ok, I have this
Code:
onClick="$('input[@type=checkbox]').attr('checked', 'checked')"

But how do you add a specific value? I'd like it to say 'check all checkboxes with value 5'.
#2

[eluser]bitist[/eluser]
Code:
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="Javascript" type="text/javascript">
$(document).ready(function() {
   $("#toggle5").click(function(event){
      $('input[@type=checkbox]').each( function() {
        if($(this).val()==5)
          this.checked = !this.checked;
      });
   });
});
</script>

<a href="#" id="toggle5">Toggle 5ve</a>

&lt;form method="post" action="" style="margin:0px"&gt;
&lt;input type="checkbox" name="a" value="1" id="" /&gt;
&lt;input type="checkbox" name="b" value="2" id="" /&gt;
&lt;input type="checkbox" name="c" value="3" id="" /&gt;
&lt;input type="checkbox" name="d" value="4" id="" /&gt;
&lt;input type="checkbox" name="e" value="5" id="" /&gt;
&lt;input type="checkbox" name="f" value="5" id="" /&gt;
&lt;/form&gt;

This will toggle checkboxes which have value=5.
#3

[eluser]codex[/eluser]
Thanks! That does the trick.
#4

[eluser]Nick Husher[/eluser]
Note that the @property=value syntax has been depricated since jQuery 1.2. From the documentation: "Note: In jQuery 1.3 [@attr] style selectors were removed (they were previously deprecated in jQuery 1.2). Simply remove the '@' symbol from your selectors in order to make them work again."

This is very similar, but lets you control what values you check and uncheck without rewriting your function:

Code:
jQuery(document).ready(function() {
    jQuery('.toggle').click(function(e) {
        var par = (/parent-class-(\S+)/).exec(e.target.className)[1];
        var val = (/toggle-value-(\S+)/).exec(e.target.className)[1];

        par = (par === null) ? par = '' : '.'+par;
        val = (val === null) ? val = '' : '[value="'+val+'"]';

        jQuery(par + ' input[type="checkbox"]' + val).each(function() {
            this.checked = !this.checked;
        });
    });        
});

Your toggle button would look something like this:
Code:
<div class="toggle toggle-value-5 parent-class-checkbox-form">Toggle all "fives" in the "checkbox form"</div>




Theme © iAndrew 2016 - Forum software by © MyBB