asked on

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

Gary

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

robrodp

ASKER

The sample changes the Check all to Uncheck all but doesn´t actally check or unchecck the checkboxes. As far as I can see

Gary

Wrong link

http://jsfiddle.net/GaryC123/78Lp2w5w/2/

Ray Paseur

Please see: https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_5450-Common-Sense-Examples-Using-Checkboxes-with-HTML-JavaScript-and-PHP.html

robrodp

ASKER

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

Gary

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>

Gary

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

Gary

<!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

robrodp

ASKER

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?

Gary

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

robrodp

ASKER

Tha ajax function changes an mssql table when something is clicked from check to uncheked or fromuncheckd to checked.

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

robrodp

ASKER

My function is called changeFunc when does it run?

Gary

That runs when you manually click a checkbox or when you click Check All/Uncheck All
(It's magic)

robrodp

ASKER

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

Gary

<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

robrodp

ASKER

Took a long time but it is working...