Grow your CSS skills. Land your dream job.

[Solved] Add Class to Parent if Checkbox is Checked

  • # December 19, 2011 at 9:59 pm

    @Mottie… (or anyone who first saw it). How do I add a class in the parent element only if the checkbox inside is checked. I want the .sortable element become yellow if checkbox is checked:

    http://jsfiddle.net/uH8Ez/

    # December 19, 2011 at 10:35 pm

    o.O

    What checkbox? and what sortable?

    # December 19, 2011 at 10:42 pm

    Click Add Paragraph…

    # December 19, 2011 at 10:56 pm

    DUH… LOL… ok try this demo

    # December 19, 2011 at 11:28 pm

    Quite complicated, but I will learn it! >o<
    I want to ask another tomorrow. Today is a lot of work. Thank you very MUCH.

    # December 20, 2011 at 4:18 am

    @Mottie… (or anyone who first saw it). This might be a bit tricky. But how can I remove the .sortable and input.remove then replace it with breakspace or paragraphs in the generated codes?

    @Chris can do that on his CSS3 Button Maker. I don’t know how to change html code into other code without changing the content.

    Can it be done for the html code? Or not?

    http://jsfiddle.net/tovic/3DMue/15/

    // how can I write my wishes correctly?
    $('button#generate').click(function(){
    var realContent = $('.sortable').html();
    $(realContent).replaceAll('.sortable');
    var thecode = $('#area').html();
    $('#thecode').text(thecode);
    $('#thecode').dialog({show:"fade", hide:"explode"});
    $('#area').html('');
    });
    # December 20, 2011 at 10:36 am

    If I am understanding your question, you could just replace the text:

    realContent = $('.sortable').html().replace('', '');
    # December 20, 2011 at 8:56 pm

    Huh, nothing happens. So I returned it. I think this will not be as easy as I think.

    # December 20, 2011 at 10:48 pm

    Ok, I understand now… try this (demo):

    $('button#generate').click(function() {
    var realContent = $('#area').clone();
    realContent.find('input').remove();
    realContent.find('.sortable').children().unwrap();
    var thecode = realContent.html();
    $('#thecode').text(thecode);
    $('#thecode').dialog({
    show: "fade",
    hide: "explode"
    });
    $('#area').html('');
    });
    # December 21, 2011 at 1:56 am

    Wow. Mottie, what’s your daily meals?

    I was thinking about Whiskas. Does Whiskas can make a person clever in JavaScript?

    Then, how can I add
    in every li, ul, ol, h1 and p? So the code would be neater.

    http://jsfiddle.net/tovic/3DMue/20/

    # December 21, 2011 at 9:40 am

    Catnip… nuff said.

    Try this (demo)

        $('button#generate').click(function() {
    var realContent = $('#area').clone();
    realContent.find('input').remove();
    realContent.find('.sortable').children().unwrap().after('
    ');
    var thecode = realContent.html()
    .replace(//g, function(m){
    return {
    '
    ' : 'nn',
    '
      ' : '
      n',
      '
    ' : 'n',
    '
      ' : '
      n',
      '
    ' : 'n',
    '
  • ' : '
  • ',
    '
  • ' : 'n'
    }[m]});
    $('#thecode').val(thecode);
    $('#thecode').dialog({
    show: "fade",
    hide: "explode"
    });
    $('#area').html('');
    });

    I changed the code div to a textarea and added a bit of formatting… I originally had a “t” in front of the LI’s but it added too much indentation, so I switched it to two spaces.

    # December 21, 2011 at 8:20 pm

    WARRRRGGGGGHHH!!!!!!!!!!! So complicated. Like C++

    T_T

    Incredible!

    http://jsfiddle.net/tovic/3DMue/23/

    # December 22, 2011 at 9:49 pm

    Huh.. when the elements dragged, the generated codes mess again! T_T

    # December 23, 2011 at 11:53 pm

    Thank’s for your help Mottie. I already get the point, on how to remove .sortable and how to add breakspace on the generated codes. It would be a good reference for me in the future :D

    # December 24, 2011 at 3:25 am

    Hey… umm what do you mean by almost solved? And I’m not sure I understand what you mean by “when the elements dragged, the generated codes mess again!”. I moved the elements around and the code seemed to be fine to me.

Viewing 15 posts - 1 through 15 (of 40 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".