jQuery addClass和removeClass复选框

Question

i am new to jQuery, and i am trying to figure out how to create the jQuery function of the checkboxes, what i want to attain is that, when a user clicked on Yes the checkboxes(which will have a display:none) will have a checkmark. But if a user will click on No the checkmark will be removed.

This will be a selection of multiple Yes and multiple No

have a look at the page im working on http://jsfiddle.net/4x2f52ka/

I have started the script for it, but for some reason, when i started to select Yes on the first selection, another yes to the second selection, and if im gonna select No to the 3rd item, the 2 Yes will be removed. It is fine if i will select all yes and all no, but if im gonna select alternate Yes and No, it doesnt allow me to.

this is my code for the html

<div class="row marginBottom">
    <div class="col-xs-6">
        <label class="alignMid">Have you found a property?</label>
    </div>
    <div class="col-xs-6">
        <span class="opt_yes"><p style="line-height: 38px; font-size:15px;">YES</p></span>
        <span class="opt_no"><p style="line-height: 38px; font-size:15px;">NO</p></span>
        <input type="checkbox" name="FoundProperty"/>
    </div>
</div>  

<div class="row marginBottom">
    <div class="col-xs-6">
        <label class="alignMid">Would you like a free RP Data Property Report?</label>
    </div>
    <div class="col-xs-6">
        <span class="opt_yes"><p style="line-height: 38px; font-size:15px;">YES</p></span>
        <span class="opt_no"><p style="line-height: 38px; font-size:15px;">NO</p></span>
        <input type="checkbox" name="FreeRPData"  />
    </div>
</div>

and this is my code for the jQuery

<script type="text/javascript"> 
jQuery(document).ready(function () { 
    jQuery('.opt_yes').click(function () {      
        jQuery(this).addClass('selected'); 
        jQuery('.opt_no').removeClass('selected')
            if (jQuery(this).hasClass('selected')) { 
            jQuery(this).parent().find("input[type='checkbox']").prop('checked', true); 
            } 
    }); 
    jQuery('.opt_no').click(function () {       
        jQuery(this).addClass('selected'); 
        jQuery('.opt_yes').removeClass('selected')
            if (jQuery(this).hasClass('selected')) { 
            jQuery(this).parent().find("input[type='checkbox']").prop('checked', false); 
            } 
    });     

}); 
</script>

Can anyone help me please?

Answer 1

You're loosing the context of your check boxes. It works for yes, because you use this , but for the no items, you just grab every 'no box' on the document using jQuery('.opt_no') . Because it's so broad, all 'no box' boxes are affected.

You can very easily narrow your selectors with this syntax: jQuery('selector', context) .

In this case, I recommend this.parentNode like so :

jQuery('.opt_yes', this.parentNode).removeClass('selected')

See my demo here: http://jsfiddle.net/m5aug81a/

For more info on using contexts for your jQuery objects, see here

Answer 2

You have to remove selected class only from sibling of yes or no. Here's the code:

<script type="text/javascript"> 
jQuery(document).ready(function () { 
jQuery('.opt_yes').click(function () {      
    jQuery(this).addClass('selected'); 
    jQuery(this).siblings('.opt_no').removeClass('selected')
        if (jQuery(this).hasClass('selected')) { 
        jQuery(this).parent().find("input[type='checkbox']").prop('checked', true); 
        } 
}); 
jQuery('.opt_no').click(function () {       
    jQuery(this).addClass('selected'); 
    jQuery(this).siblings('.opt_yes').removeClass('selected');
        if (jQuery(this).hasClass('selected')) { 
        jQuery(this).parent().find("input[type='checkbox']").prop('checked', false); 
        } 
});     

}); 
</script>