Question

<div class="test-test-one">one</div>
<input type="checkbox" class="now" name="here_one"> <br />

<div class="test-test-two">two</div>
<input type="checkbox" class="now" name="here_two"> <br />

<div class="test-test-three">three</div>
<input type="checkbox" class="now" name="here_three"> <br />

<div class="test-test-four">four</div>
<input type="checkbox" class="now" name="here_four"> <br />

​
FIDDLE: http://jsfiddle.net/3eUEp/

I would like doing:

if i click on checkbox with name = here_one then this should be add class .red to div with class test-test-one
and if i click on div with class test-test-one then also should be checked checkbox with name = here_one.

How can i make it with jQuery? i dont want use prev and next. I would like use selectors, but how to use substr from PHP for this?

Answer 1

Here is the javascript documentation : http://www.w3schools.com/jsref/

And jQuery : http://docs.jquery.com/Main_Page

$('.now').click(function(){
    var v = $(this).attr('name').replace('here_', '');
if($(this).is(':checked'))  
{
        $('.test-test-'+v).addClass('red');
    }
    else
    {
        $('.test-test-'+v).removeClass('red');
    }
});


$("div[class^='test-test']").click(function(){
    if($(this).hasClass('red'))
    {
        $(this).next('.now').attr('checked', false);
        $(this).removeClass('red');
    }
    else
    {
        $(this).next('.now').attr('checked', true);
        $(this).addClass('red');
    }
});