• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 139
  • Last Modified:

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

0
robrodp
Asked:
robrodp
  • 9
  • 7
1 Solution
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 9
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now