Question

I’ve been at this for the past 2 hours and cannot get this figured out.

I have a list item that when clicked the jquery pulls the class of the li item which is a color. It then Capitalizes the first letter then finds the checkbox value with the color matching and marks it as checked.

Only I want it so that if someone clicks the li item again it will uncheck the checkbox

Can someone help at all?

$('#colours li').live('click', function (){
    var color = $(this).attr('class');
    color = color[0].toUpperCase() + color.slice(1);
    console.log($('input[value="'+color+'"]'));
    $(this).css('opacity','0.5');

    if($('input[value="'+color+'"]:checked').length) {
        $('input[value="'+color+'"]').attr('checked', true);
        console.log("checked");
    } else {
        $('input[value="'+color+'"]').removeAttr('checked');
        console.log("not checked");
    }    
});



<ul id="colours">
        <li class="black"></li>
        <li class="brown"></li>
</ul>

<input type="checkbox" name="color" value="Black" class="hidden" />
<input type="checkbox" name="color" value="Brown" class="hidden" />

forgot to add the ul and inputs are loaded using jquery .load()

Answer 1

this should do

$('#colours').on('click', 'li', function (){
  var th = $(this);
  var color = th.attr('class');
  color = color[0].toUpperCase() + color.slice(1);
  var input = $('input[value="'+color+'"]')
  console.log(input);
  th.css('opacity','0.5');

  if(input.length == 1) {
    if (input.is(':checked')) {
      input.prop('checked', false);  
      console.log("not checked");
    } else {
      input.prop('checked', true); 
      console.log("checked");
    }
  }

});