JQuery Checkbox not working

Page 1 of 1

2 Replies - 4940 Views - Last Post: 08 October 2012 - 10:57 AM

#1 saadaslam   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 05-October 12

JQuery Checkbox not working

Posted 05 October 2012 - 02:12 PM

Hi,

I am new to jQuery. I was trying to get http://jsfiddle.net/heera/bGwrS/30/ to work with my page.
I want my checkbox to function just like this. So if no one selects anything all is selected by default.

My current code is below.

Thanks in advance. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
		<title>test</title>
        <script type="text/javascript" src="jquery-1.3.2.min"></script>
        
      <script type="text/javascript" language="javascript">
         $(function checkbox(fn){
        var el=$('input:checkbox[name="city_pref[]"]');
        el.on('change', function(e){
            if($(this).attr('id')!='city_all')
            {
                if($(this).is(':checked')) 
                    $('#city_all').prop('checked', false);
                else
                {
                    var l=$(':checkbox[name="city_pref[]"]')
                        .filter(':checked')
                        .not('#city_all').length;
                    if(l==0) 
                      $('#city_all').prop('checked', true);
                }
            }
            else
            {
                if($(this).is(':checked'))
                    el.not($(this)).prop('checked', false);
            }
        });
    });​
    </script>
</head>
	<body>
    <form name="form1" onclick="checkbox(fn)" >
<label for="city_all"><input type="checkbox" name="city_pref[]" id="city_all" value="0" checked />All</label>
<label for="city_pref_1"><input type="checkbox" name="city_pref[]" id="city_pref_1" value="Chicago" />Chicago</label>
<label for="city_pref_2"><input type="checkbox" name="city_pref[]" id="city_pref_2" value="Texas" />Texas</label>​
    
    </form>
    </body>
    
    </html>


Is This A Good Question/Topic? 0
  • +

Replies To: JQuery Checkbox not working

#2 sas1ni69   User is offline

  • D.I.C Regular
  • member icon

Reputation: 86
  • View blog
  • Posts: 431
  • Joined: 04-December 08

Re: JQuery Checkbox not working

Posted 07 October 2012 - 08:13 PM

I'm not sure why when I copied your code, some weird characters were coming up but when I copied it from jsfiddle it came out alright;

Try this instead:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Checkbox</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
$(function(){
        var el=$('input:checkbox[name="city_pref[]"]');
        el.change(function(e){
            if($(this).attr('id')!='city_all')
            {
                if($(this).is(':checked'))
                    $('#city_all').prop('checked', false);
                else
                {
                    var l=$(':checkbox[name="city_pref[]"]')
                        .filter(':checked')
                        .not('#city_all').length;
                    if(l==0)
                      $('#city_all').prop('checked', true);
                }
            }
            else
            {
                if($(this).is(':checked'))
                    el.not($(this)).prop('checked', false);
            }
        });
    });
</script>
</head>
<body>
<label for="city_all"><input type="checkbox" name="city_pref[]" id="city_all" value="0" checked />All</label>
<label for="city_pref_1"><input type="checkbox" name="city_pref[]" id="city_pref_1" value="Chicago" />Chicago</label>
<label for="city_pref_2"><input type="checkbox" name="city_pref[]" id="city_pref_2" value="Texas" />Texas</label>
</body>
</html>

Was This Post Helpful? 1
  • +
  • -

#3 saadaslam   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 05-October 12

Re: JQuery Checkbox not working

Posted 08 October 2012 - 10:57 AM

Thanks A LOT! it worked like a charm.

This post has been edited by JackOfAllTrades: 09 October 2012 - 03:25 AM
Reason for edit:: Removed unnecessary quote

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1