Jquery checkbox target id's only one

Question

$(document).ready(function (){
$(function(){
    $('input:checkbox').prop('checked', false)
    $('input:checkbox').click(function(){
        if($(this).is(':checked')){
            $('input:checkbox').not(this).prop('checked', false);        
        }
    });
})
showdiv();

});

---

The above code works awesome!! first it makes all the checkboxes "unchecked" then It makes it so only "one" checkbox can be checked at a time!

But... i need it too effect only the three checkboxes below! Not all the checkboxes on the page!!! Guess i dunno how to make it target just the id's co33, co34, co35..

<input name="option[13]" id="co33" value="33" checked="checked" onclick="showdiv()" type="radio"> 
<input name="option[14]" id="co34" value="34" checked="checked" onclick="showdiv()" type="radio">  
<input name="option[15]" id="co35" value="35" checked="checked" onclick="showdiv()" type="radio"> 

And then!!! ... if one of those is checked then this 4th checkbox gets checked too!! If NONE of the three above are checked then this one isnt checked either!

<input id="a1" type="checkbox" onclick="showdiv()" name="add[1]">

Man i hope that came out right.. the html is created automatically so i cant make em all have the same id or add a class so im looking to see if i can target them by id name .. Frankly even just being able to make the code initially posted to effect just the 3 checkboxes would be awesome.. Getting the 4th checkbox to be checked if one of the three is checked is a bonus!

Answer 1

You can target them by name using attribute selectors, it's not terribly efficient but it'll work and probably work well enough. Just change all your $('input:checkbox')s to:

$('input[name="option[13]"], input[name="option[14]"], input[name="option[15]"]')

And at the end of the click handler (outside the if), do:

$('#a1').prop(
    "checked",
    $('input[name="option[13]"], input[name="option[14]"], input[name="option[15]"]')
       .is(':checked')
);

EDIT: Actually, I just noticed the IDs on the group of interest, it'll be quicker (and less typing) to hit those. Use the selector:

$('#co33, #co34, #co35')

Answer 2

You're mixing up radios with checkboxes. You're also wrapping a DOM ready event inside a DOM ready event. Here you go:

$(function(){
    $('input:checkbox').prop('checked', false);
    $('input:radio').prop('checked', false).filter(function(e){
        return (this.id == 'co33' ||
                this.id == 'co34' ||
                this.id == 'co35');
    }).on('click', function(){
        if($(this).is(':checked')){
            $('input:radio').not(this).prop('checked', false);
            $('#a1').prop('checked', true);
        }        
    });
    showdiv(); 
});

Demo: http://jsfiddle.net/qUtQb/

Answer 3

You question is like

"But... i need it too effect only the three checkboxes below! Not all the checkboxes on the page!!! Guess i dunno how to make it target just the id's co33, co34, co35.."

<input name="option[13]" id="co33" value="33" checked="checked" onclick="showdiv()" type="radio"> 
<input name="option[14]" id="co34" value="34" checked="checked" onclick="showdiv()" type="radio">  
<input name="option[15]" id="co35" value="35" checked="checked" onclick="showdiv()" type="radio"> 

and you have above HTML markup now as defined in HTML they are radio not checkbox.

So try

$('input:radio').attr('checked', false)
$('input:radio').click(function(){
    if($(this).is(':checked')){
        $('input:radio').not(this).attr('checked', false);        
    }
});

Answer 4

Try something like

$(function(){
    var radios = $('input:radio[name^=option]').prop('checked', false)
    radios.click(function(){
        if($(this).is(':checked')){
            $('input:radio[name^=option]').not(this).prop('checked', false);        
        }

        $('#a1').prop('checked', radios.is(':checked'))
    });

    showdiv();
});

demo: Fiddle