Question

I have some Jquery that I’ve added to a load of other Jquery (which all works fine) but it’s breaking the rest of my code. There’s an error in there somewhere but I just can’t work out where!

//Retrieve the customization summary area:
var summary = $('#customise-area-3 p');

//Use jQuery to select all the checkboxes with the name hardware that are checked.
$('input[type=checkbox][name=hardware\[\]]:checked').each(function(k,v) {
    //Retrieve the value of the checkbox.
    var checkboxValue = v.val();

    //Add the checkbox value to the summary area:
    summary.innerHTML += checkboxValue + '<br />';
});

This is within WordPress so all the rest of my Jquery is in the style of:

jQuery(document).ready(function( $ ) 
{
    $("#customise").click(function()
    {
        $(".entire_product").hide();
        $(".customise").show();
    });
});

---

To get the code working within the WordPress environment I’ve done the following:

jQuery(document).ready(function( $ ) 
{
   var summary = $('#customise-area-3 p').get(0);

   $('input[type=checkbox][name="hardware[]"]:checked').each(function(k,v) {
    //Retrieve the value of the checkbox.
    var checkboxValue = v.val();

    //Add the checkbox value to the summary area:
    summary[0].innerHTML += checkboxValue + '<br />';
});
});

Although this stops the rest of my code from breaking, it doesn’t actually do anything. I.e add the selected checkbox value to the summary.

Answer 1

You are incorrectly using \ slash in selector and you are using innerHTML on jQuery object which is wron

Change

$('input[type=checkbox][name=hardware\[\]]:checked')

To

$('input[type=checkbox][name="hardware[]"]:checked')

You better use wild card if you need to check name that starts with hardware

$('input[type=checkbox][name^=hardware]:checked')

Change

summary.innerHTML += checkboxValue + '<br />';

To

summary[0].innerHTML += checkboxValue + '<br />';