jQuery and theme options

Question

Actually I have two check boxes on my metabox text field and also two metabox text fields above that text field. Also two text fields in my theme options in which I have to put some html and javascript code. So here is my code:

Metabox text fields and checkboxes:

<input type="textarea" id="c" value="Your Name" />
<input type="textarea" id="d" value="My Name" />
<input type="checkbox" id="a" />
<input type="checkbox" id="b" />
<input type="textarea" id="e" />

Theme Option Text fields:

<input type="textarea" id="f"  />
<input type="textarea" id="g"  />

I have to put javascript in theme option text fields somewhat like this:

<div>
<script type=text/javascript> name: 'My Name is/', name2: 'Your name is/', </script> 
</div>

Now comes the real worry. I want that when I click check box with the id 'a', the code from the theme options text field with the id 'f' will be put into the metabox text field with the id 'e' but with little modification. The modification i need is that the data from metabox text fields with the id 'c' and 'd' will first be added to the code that has been grabbed from the theme option text field with the id 'f' in such a way that value of metabox text field with the id 'c' is added to the "name: My Name is/(Here will be the value of text field with the id 'c')" and value of metabox text field with the id 'd' is added to the "name2: Your Name is/(Here will be the value of text field with the id 'd')".

I am also using jquery code for these checkboxes behaviour. Here is my jQuery code.

$(function () {
$('#a, #b').change(function () {
    var $a = $('#a'), $b = $('#b'), $c = $('#c');
    if (this.id == 'a' && this.checked) {
       $c.val('Hello World!');
       $b.prop('checked', false);
    } else if (this.id == 'b' && this.checked) {
       $c.val('Not hello World!'); 
       $a.prop('checked', false);
    } else {
       $c.val('');
    }
});
});

​ Obviously there is flaw in this jQuery code as I don't want these values such as Hello world or Not Hello World of my metabox text field with the id 'c'. I want the value of that field as I explained earlier. Please help me in this regard. I am very much frustrated.

Answer 1

First, use jQuery instead of $. In a WordPress environment, jQuery is run in "noconflict" mode, so the $ variable isn't available.

Second, I would rewrite your event handler a bit:

jQuery('#a, #b').change(function () {
    var $this = jQuery(this), // Get a handle on the checkbox we just clicked.
        $c = jQuery('#c'),    // Get a handle on the textbox.
        $d = jQuery('#d'),    // Get a handle on the textbox.
        $e = jQuery('#e'),    // Get a handle on the textbox.
        $f = jQuery('#f'),    // Get a handle on one of our default values.
        $g = jQuery('#g');    // Get a handle on one of our default values.

    if ($this.attr('id') == 'a' && $this.is(':checked')) {
       // Clicking checkbox a will add the content of c and f and place it in e
       // It will also uncheck checkbox b.

       $e.val( $c.val() + ' ' + $f.val() );
       $b.removeAttr('checked');
    } else if ($this.attr('id') == 'b' && $this.is(':checked')) {
       // Clicking checkbox b will add the content of d and g and place it in e
       // It will also uncheck checkbox a.

       $e.val( $d.val() + ' ' + $g.val() );
       $a.removeAttr('checked');
    } else {
       $e.val('');
    }
});

This seems to handle the scenario you describe. If not, please edit your question to explain, step-by-step, what should be happening when each checkbox is changed so we can script accordingly.