select/unselect allinput checkboxes

I have a list of checkboxes, I need an optionto select/unselect all of them

<form method="post" name="forma" action="modex.php" >


<div style="height: 6em; width: 12em; overflow: auto;">
	
		

<input  type="checkbox" id="armadora" name="armadora[]" value="AUDI"  onclick="changeFunc('AUDI');">
<label style="background-color: #EAF5FE; font-family:Arial;" for="AUDI">AUDI</label>
<br>

<input  type="checkbox" id="armadora" name="armadora[]" value="BENTLEY"  onclick="changeFunc('BENTLEY');">
<label style="background-color: #EAF5FE; font-family:Arial;" for="BENTLEY">BENTLEY</label>
<br>

<input  type="checkbox" id="armadora" name="armadora[]" value="BMW"  onclick="changeFunc('BMW');">
<label style="background-color: #EAF5FE; font-family:Arial;" for="BMW">BMW</label>
<br>
 
</div>
<input type="submit">
</form>

Open in new window

robrodpAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
http://jsfiddle.net/GaryC123/78Lp2w5w/1/

$(".check").click(function () {
    if ($(this).text() == "Check All") {
        $("[type=checkbox]").prop("checked", true)
        $(this).text("Uncheck All")
    } else {
        $("[type=checkbox]").prop("checked", false)
        $(this).text("Check All")
    }
})

Open in new window

0
robrodpAuthor Commented:
The sample changes the Check all to Uncheck all but doesn´t actally check or unchecck the checkboxes. As far as I can see
0
GaryCommented:
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

robrodpAuthor Commented:
I copied the code, andI cant get it to work. I am missing something

I also added the line: <span class="check">Check All</span> before the <form>

I cant see the class check anywhere

<script>
$(".check").click(function () {
    if ($(this).text() == "Check All") {
        $("[type=checkbox]").prop("checked", true)
        $(this).text("Uncheck All")
    } else {
        $("[type=checkbox]").prop("checked", false)
        $(this).text("Check All")
    }
})
</script>

Open in new window

0
GaryCommented:
I cant see the class check anywhere
It's in the span

Are you including the jquery library before the script?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
0
GaryCommented:
Also replace that script with this so it only fires when the document is loaded.

$(function() {
$(".check").click(function () {
    if ($(this).text() == "Check All") {
        $("[type=checkbox]").prop("checked", true)
        $(this).text("Uncheck All")
    } else {
        $("[type=checkbox]").prop("checked", false)
        $(this).text("Check All")
    }
})
});

Open in new window

0
GaryCommented:
<!DOCTYPE html>
<html>
<body>
<span class="check">Check All</span>

<form method="post" name="forma" action="modex.php">
    <div style="height: 6em; width: 12em; overflow: auto;">
        <input type="checkbox" id="armadora" name="armadora[]" value="AUDI" onclick="changeFunc('AUDI');">
        <label style="background-color: #EAF5FE; font-family:Arial;" for="AUDI">AUDI</label>
        <br>
        <input type="checkbox" id="armadora" name="armadora[]" value="BENTLEY" onclick="changeFunc('BENTLEY');">
        <label style="background-color: #EAF5FE; font-family:Arial;" for="BENTLEY">BENTLEY</label>
        <br>
        <input type="checkbox" id="armadora" name="armadora[]" value="BMW" onclick="changeFunc('BMW');">
        <label style="background-color: #EAF5FE; font-family:Arial;" for="BMW">BMW</label>
        <br>
    </div>
    <input type="submit">
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
$(".check").click(function () {
    if ($(this).text() == "Check All") {
        $("[type=checkbox]").prop("checked", true)
        $(this).text("Uncheck All")
    } else {
        $("[type=checkbox]").prop("checked", false)
        $(this).text("Check All")
    }
})
});
</script>
</body>
</html>

Open in new window

0
robrodpAuthor Commented:
Ok...

Now when do it one by one the onClcik function does its job with ajax.

Can they be cheked in a way that the ajax function does its thing?

I meacn checkil all but one by one so the ajax fucntion can ´be called for eachone?
0
GaryCommented:
Do you want it firing if they uncheck the checkbox as well?
This code doesn't do that, only when they check the checkboxes

$(".check").click(function () {
    if ($(this).text() == "Check All") {
        $("[type=checkbox]").each(function () {
            $(this).prop("checked", true);
            $(this).trigger("click")
        })
        $(this).text("Uncheck All")
    } else {
        $("[type=checkbox]").prop("checked", false)
        $(this).text("Check All")
    }
})

Open in new window

0
robrodpAuthor Commented:
Tha ajax function changes an mssql table when something is clicked from check to uncheked or fromuncheckd to checked.
0
GaryCommented:
$(".check").click(function () {
    if ($(this).text() == "Check All") {
        $("[type=checkbox]").each(function () {
            $(this).prop("checked", true);
            $(this).trigger("click")
        })
        $(this).text("Uncheck All")
    } else {
        $("[type=checkbox]").each(function () {
            $(this).prop("checked", false);
            $(this).trigger("click")
        })
        $(this).text("Check All")
    }
})

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
robrodpAuthor Commented:
My function is called changeFunc when does it run?
0
GaryCommented:
That runs when you manually click a checkbox or when you click Check All/Uncheck All
(It's magic)
0
robrodpAuthor Commented:
How do I include it in the script is that ok?

<script>
$(".check").click(function () {
    if ($(this).text() == "Check All") {
        $("[type=checkbox]").each(function () {
            $(this).prop("checked", true);
            $(this).trigger("click")
        })
        $(this).text("Uncheck All")
    } else {
        $("[type=checkbox]").each(function () {
            $(this).prop("checked", false);
            $(this).trigger("click")
        })
        $(this).text("Check All")
    }
})

function changeFunc()

.....
</script>

Open in new window

0
GaryCommented:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
$(".check").click(function () {
    if ($(this).text() == "Check All") {
        $("[type=checkbox]").prop("checked", true)
        $(this).text("Uncheck All")
    } else {
        $("[type=checkbox]").prop("checked", false)
        $(this).text("Check All")
    }
})
});
function changeFunc(){
...
}
</script>

Open in new window

0
robrodpAuthor Commented:
Took a long time but it is working...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.