CODEWITHSUNDEEP
javascriptjquerycheckbox
Rrryyyaaannn
Rrryyyaaannn

Reputation: 2597

Checkbox doesn't check

I have some checkboxes with related fields that are marked up like this:

<div class="job-position" id="bartending">
    <div>
        <input type="checkbox" id="bartending-checkbox" name="bartending" value="Bartending" />
        Bartending
        <br />
        <span class="experience"></span>
        <!-- html here completed with jquery -->
    </div>
<div class="reference">Reference 
        <span class="instructions">(Name &amp; Phone)</span>
        <br />
        <input type="text" name="bartending-reference" />
    </div>
</div>

And some jquery like this:

$('input:checkbox').toggle(function(event){
    var jobPositionId=event.target.id
    $('div.job-position' + '#' + jobPositionId + ' select' + ',' + 'div.job-position' + '#' + jobPositionId + ' div.reference')
        .fadeIn(200);
    $('input#' + jobPositionId).parent('div').find('span.experience').html(some html here);

},function(event){
     var jobPositionId=event.target.id
     $('div.job-position' + '#' + jobPositionId + ' select' + ',' + 'div.job-position' + '#' + jobPositionId + ' div.reference')
         .fadeOut(200);
     $('input#' + jobPositionId).parent('div').find('span.experience').html('');
});

When the checkbox is check, jquery fades in an element and writes some html into the . Only problem is that the checkbox does not receive a "check" when you click it.

Upvotes: 1

Views: 1001

Answers (1)

Ram
Ram

Reputation: 144739

Try the following:

$('input:checkbox').change(function(event){
    if (this.checked) {
        var jobPositionId = event.target.id
        $('div.job-position' + '#' + jobPositionId + ' select' + ',' + 'div.job-position' + '#' + jobPositionId + ' div.reference').fadeIn(200);
        $('input#' + jobPositionId).parent('div').find('span.experience').html("some html here");
    }  else {
        var jobPositionId=event.target.id
        $('div.job-position' + '#' + jobPositionId + ' select' + ',' + 'div.job-position' + '#' + jobPositionId + ' div.reference').fadeOut(200);
        $('input#' + jobPositionId).parent('div').find('span.experience').html('');
    }
});

DEMO

please note that toggle() is deprecated.

Upvotes: 3

Related Questions