Ik ben geen expert met jQuery, maar ik heb geprobeerd een klein script voor mijn toepassing te maken. Ik wil alle selectievakjes aanvinken, maar het werkt niet correct.
Eerst probeerde ik attr
te gebruiken en daarna probeerde ik het met prop
maar ik doe iets verkeerd.
Ik heb dit eerst geprobeerd:
$("#checkAll").change(function(){
if (! $('input:checkbox').is('checked')) {
$('input:checkbox').attr('checked','checked');
} else {
$('input:checkbox').removeAttr('checked');
}
});
Maar dit werkte niet.
Volgende: Dit werkte beter dan bovenstaande code
$("#checkAll").change(function(){
if (! $('input:checkbox').is('checked')) {
$('input:checkbox').prop('checked',true);
} else {
$('input:checkbox').prop('checked', false);
}
});
Beide voorbeelden werken niet.
JSFiddle: http://jsfiddle.net/hhZfu/4/
Antwoord 1, autoriteit 100%
U moet .prop()gebruiken om de aangevinkte eigenschap in te stellen
$("#checkAll").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});
Demo: Fiddle
Antwoord 2, autoriteit 16%
Gebruik gewoon de eigenschap checked
van de checkAll
en gebruik prop()in plaats van attr voor gecontroleerde eigenschap
$('#checkAll').click(function () {
$('input:checkbox').prop('checked', this.checked);
});
Gebruik prop() in plaats van attr() voor eigenschappen zoals aangevinkt
Vanaf jQuery 1.6 retourneert de .attr()-methode undefined voor attributen
die niet zijn ingesteld. DOM-eigenschappen ophalen en wijzigen, zoals:
de aangevinkte, geselecteerde of uitgeschakelde staat van formulierelementen, gebruik de
.prop() methode
U heeft dezelfde ID voor selectievakjes en deze moet uniekzijn. U kunt beter een klasse gebruiken met de afhankelijke selectievakjes, zodat deze niet de selectievakjesbevatten die u niet wilt. Omdat $('input:checkbox')
alle selectievakjes op de pagina zal selecteren. Als uw pagina wordt uitgebreid met nieuwe selectievakjes, worden deze ook geselecteerd/gedeselecteerd. Wat misschien niet het beoogde gedrag is.
$('#checkAll').click(function () {
$(':checkbox.checkItem').prop('checked', this.checked);
});
Antwoord 3, autoriteit 14%
Hier vindt u een complete oplossing.
$(document).ready(function() {
$("#checkedAll").change(function() {
if (this.checked) {
$(".checkSingle").each(function() {
this.checked=true;
});
} else {
$(".checkSingle").each(function() {
this.checked=false;
});
}
});
$(".checkSingle").click(function () {
if ($(this).is(":checked")) {
var isAllChecked = 0;
$(".checkSingle").each(function() {
if (!this.checked)
isAllChecked = 1;
});
if (isAllChecked == 0) {
$("#checkedAll").prop("checked", true);
}
}
else {
$("#checkedAll").prop("checked", false);
}
});
});
Html moet zijn:
Enkel selectievakje op aangevinkte drie selectievakjes zal worden geselecteerd en gedeselecteerd.
<input type="checkbox" name="checkedAll" id="checkedAll" />
<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />
Ik hoop dat dit voor iemand net zo helpt als voor mij.
JS Fiddle https://jsfiddle.net/52uny55w/
Antwoord 4, autoriteit 3%
Ik denk dat wanneer de gebruiker alle selectievakjes handmatig selecteert, checkall automatisch moet worden aangevinkt of dat de gebruiker een van hen uit alle geselecteerde selectievakjes haalt, dan moet checkall automatisch worden uitgeschakeld.
hier is mijn code..
$('#checkall').change(function () {
$('.cb-element').prop('checked',this.checked);
});
$('.cb-element').change(function () {
if ($('.cb-element:checked').length == $('.cb-element').length){
$('#checkall').prop('checked',true);
}
else {
$('#checkall').prop('checked',false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="checkbox" name="all" id="checkall" />Check All</br>
<input type="checkbox" class="cb-element" /> Checkbox 1</br>
<input type="checkbox" class="cb-element" /> Checkbox 2</br>
<input type="checkbox" class="cb-element" /> Checkbox 3
Antwoord 5, autoriteit 2%
Waarom probeer je dit niet eens (in de 2e regel waar ‘form#’ je de juiste selector van je html-formulier moet plaatsen):
$('.checkAll').click(function(){
$('form#myForm input:checkbox').each(function(){
$(this).prop('checked',true);
})
});
$('.uncheckAll').click(function(){
$('form#myForm input:checkbox').each(function(){
$(this).prop('checked',false);
})
});
Uw html zou er zo uit moeten zien:
<form id="myForm">
<span class="checkAll">checkAll</span>
<span class="uncheckAll">uncheckAll</span>
<input type="checkbox" class="checkSingle"></input>
....
</form>
Ik hoop dat dat helpt.
Antwoord 6, autoriteit 2%
$(document).ready(function() {
$("#parent").click(function() {
$(".child").prop("checked", this.checked);
});
$('.child').click(function() {
if ($('.child:checked').length == $('.child').length) {
$('#parent').prop('checked', true);
} else {
$('#parent').prop('checked', false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<p><input type="checkbox" id="parent" /> Check/Uncheck All</p>
<ul>
<li>
<input type="checkbox" class="child" /> Checkbox 1</li>
<li>
<input type="checkbox" class="child" /> Checkbox 2</li>
<li>
<input type="checkbox" class="child" /> Checkbox 3</li>
</ul>
Antwoord 7
Eenvoudigste manier die ik ken:
$('input[type="checkbox"]').prop("checked", true);
Antwoord 8
$('#checkAll').on('change', function(){
if($(this).attr('checked')){
$('input[type=checkbox]').attr('checked',true);
}
else{
$('input[type=checkbox]').removeAttr('checked');
}
});
Antwoord 9
één selectievakje om ze allemaal te regeren
Voor mensen op zoek naar plug-in om selectievakjes te bedienen via één die lichtgewicht is, heeft u out-of-the-box-ondersteuning voor Uniformjs en isheck en wordt niet gecontroleerd wanneer ten minste één van de gecontroleerde selectievakjes is uitgeschakeld (en wordt gecontroleerd wanneer alle gecontroleerde selectievakjes worden gecontroleerd zijn gecontroleerd natuurlijk) Ik heb een jQuery checkall plugin gemaakt.
Voel je vrij om de voorbeelden te controleren op documentatiepagina .
Voor dit vraagvoorbeeld, alles wat u hoeft te doen is:
$( "#checkAll" ).checkall({
target: "input:checkbox"
});
is niet zo duidelijk en eenvoudig?
Antwoord 10
<p id="checkAll">Check All</p>
<hr />
<input type="checkbox" class="checkItem">Item 1
<input type="checkbox" class="checkItem">Item 2
<input type="checkbox" class="checkItem">Item3
en jQuery
$(document).on('click','#checkAll',function () {
$('.checkItem').not(this).prop('checked', this.checked);
});
Antwoord 11
U kunt .prop()
over de resultaten van een jQuery-selector direct, zelfs als het meer dan één resultaat retourneert. Dus:
$("input[type='checkbox']").prop('checked', true)
Antwoord 12
Meestal wilt u ook dat het master-selectievakje niet wordt aangevinkt als het selectievakje van minimaal 1 slave is uitgeschakeld en om te worden gecontroleerd als alle slave-selectievakjes worden gecontroleerd:
/**
* Checks and unchecks checkbox-group with a master checkbox and slave checkboxes
* @param masterId is the id of master checkbox
* @param slaveName is the name of slave checkboxes
*/
function checkAll(masterId, slaveName) {
$master = $('#' + masterId);
$slave = $('input:checkbox[name=' + slaveName + ']');
$master.click(function(){
$slave.prop('checked', $(this).prop('checked'));
$slave.trigger('change');
});
$slave.change(function() {
if ($master.is(':checked') && $slave.not(':checked').length > 0) {
$master.prop('checked', false);
} else if ($master.not(':checked') && $slave.not(':checked').length == 0) {
$master.prop('checked', 'checked');
}
});
}
En als u een besturingselement wilt inschakelen (bijv. de knop Remove All
of een knop Add Something
), wanneer ten minste één selectievakje is aangevinkt en uitschakelen wanneer er geen selectievakje is aangevinkt:
/**
* Checks and unchecks checkbox-group with a master checkbox and slave checkboxes,
* enables or disables a control when a checkbox is checked
* @param masterId is the id of master checkbox
* @param slaveName is the name of slave checkboxes
*/
function checkAllAndSwitchControl(masterId, slaveName, controlId) {
$master = $('#' + masterId);
$slave = $('input:checkbox[name=' + slaveName + ']');
$master.click(function(){
$slave.prop('checked', $(this).prop('checked'));
$slave.trigger('change');
});
$slave.change(function() {
switchControl(controlId, $slave.filter(':checked').length > 0);
if ($master.is(':checked') && $slave.not(':checked').length > 0) {
$master.prop('checked', false);
} else if ($master.not(':checked') && $slave.not(':checked').length == 0) {
$master.prop('checked', 'checked');
}
});
}
/**
* Enables or disables a control
* @param controlId is the control-id
* @param enable is true, if control must be enabled, or false if not
*/
function switchControl(controlId, enable) {
var $control = $('#' + controlId);
if (enable) {
$control.removeProp('disabled');
} else {
$control.prop('disabled', 'disabled');
}
}
Antwoord 13
HTML
<HTML>
<HEAD>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
<td>Droid X</td>
<td>4.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td>HTC Desire</td>
<td>3/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
<td>Apple iPhone 4</td>
<td>5/5</td>
</tr>
</table>
</BODY>
</HTML>
jQuery-code
<SCRIPT language="javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</SCRIPT>
Bekijk demo
Klik hier om Demo te bekijken
Antwoord 14
Gebruik .PROP () om de waarde van een woning
te krijgen
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
Antwoord 15
Ik weet dat er hier veel antwoord is, maar ik zou dit willen plaatsen voor optimalisatie van de code en we kunnen het wereldwijd gebruiken.
Ik heb mijn beste geprobeerd
/*----------------------------------------
* Check and uncheck checkbox which will global
* Params : chk_all_id=id of main checkbox which use for check all dependant, chk_child_pattern=start pattern of the remain checkboxes
* Developer Guidline : For to implement this function Developer need to just add this line inside checkbox {{ class="check_all" dependant-prefix-id="PATTERN_WHATEVER_U_WANT" }}
----------------------------------------*/
function checkUncheckAll(chk_all_cls,chiled_patter_key){
if($("."+chk_all_cls).prop('checked') == true){
$('input:checkbox[id^="'+chiled_patter_key+'"]').prop('checked', 'checked');
}else{
$('input:checkbox[id^="'+chiled_patter_key+'"]').removeProp('checked', 'checked');
}
}
if($(".check_all").get(0)){
var chiled_patter_key = $(".check_all").attr('dependant-prefix-id');
$(".check_all").on('change',function(){
checkUncheckAll('check_all',chiled_patter_key);
});
/*------------------------------------------------------
* this will remain checkbox checked if already checked before ajax call! :)
------------------------------------------------------*/
$(document).ajaxComplete(function() {
checkUncheckAll('check_all',chiled_patter_key);
});
}
Ik hoop dat dit zal helpen!
Antwoord 16
function checkAll(class_name) {
$("." + class_name).each(function () {
if (this.checked == true)
this.checked = false;
else
this.checked = true;
});
}
Antwoord 17
Checkall is de ID van Allcheck Box en CB-CHILD is de naam van elke selectievakjes die worden gecontroleerd en niet aangevinkt, afhankelijk van de cheque-klik-gebeurtenis
$("#checkall").click(function () {
if(this.checked){
$("input[name='cb-child']").each(function (i, el) {
el.setAttribute("checked", "checked");
el.checked = true;
el.parentElement.className = "checked";
});
}else{
$("input[name='cb-child']").each(function (i, el) {
el.removeAttribute("checked");
el.parentElement.className = "";
});
}
});
Antwoord 18
* Java-script om alle check-box *
te selecteren
Beste oplossing .. Probeer het
<script type="text/javascript">
function SelectAll(Id) {
//get reference of GridView control
var Grid = document.getElementById("<%= GridView1.ClientID %>");
//variable to contain the cell of the Grid
var cell;
if (Grid.rows.length > 0) {
//loop starts from 1. rows[0] points to the header.
for (i = 1; i < grid.rows.length; i++) {
//get the reference of first column
cell = grid.rows[i].cells[0];
//loop according to the number of childNodes in the cell
for (j = 0; j < cell.childNodes.length; j++) {
//if childNode type is CheckBox
if (cell.childNodes[j].type == "checkbox") {
//Assign the Status of the Select All checkbox to the cell checkbox within the Grid
cell.childNodes[j].checked = document.getElementById(Id).checked;
}
}
}
}
}
</script>
Antwoord 19
Mijn oplossing
$(function() {
$(".checkAll").click(function(){
checkwhat = $(this).data("checkwhat");
$('input:checkbox.'+checkwhat).not(this).prop('checked', this.checked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<lablel><input type="checkbox" name="chkSelectAll" class="checkAll" data-checkwhat="chkSelect">check all group 1</lablel>
<br>
<input class="chkSelect" type="checkbox" name="chkSelect[]" value="1"> value 1.1<br>
<input class="chkSelect" type="checkbox" name="chkSelect[]" value="2"> value 1.2<br>
<input class="chkSelect" type="checkbox" name="chkSelect[]" value="3"> value 1.2<br>
<br>
<br>
<lablel><input type="checkbox" name="chkSelectAll" class="checkAll" data-checkwhat="chkSelect2">check all group 1</lablel>
<br>
<input class="chkSelect2" type="checkbox" name="chkSelect[]" value="1"> value 2.1<br>
<input class="chkSelect2" type="checkbox" name="chkSelect[]" value="4">value 2.1<br>
Antwoord 20
U kunt onderstaande eenvoudige code gebruiken:
function checkDelBoxes(pForm, boxName, parent)
{
for (i = 0; i < pForm.elements.length; i++)
if (pForm.elements[i].name == boxName)
pForm.elements[i].checked = parent;
}
Voorbeeld voor gebruik:
<a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', true);return false;"> Select All
</a>
<a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', false);return false;"> Unselect All
</a>
Antwoord 21
if(isAllChecked == 0)
{
$("#select_all").prop("checked", true);
}
verander de bovenstaande regel in
if(isAllChecked == 0)
{
$("#checkedAll").prop("checked", true);
}
in het antwoord van SSR en het werkt perfect Bedankt
Antwoord 22
if($('#chk_all').is(":checked"))
{
$('#'+id).attr('checked', true);
}
else
{
$('#'+id).attr('checked', false);
}
Antwoord 23
$('#checkall').on("click",function(){
$('.chk').trigger("click");
});
Antwoord 24
html :
<div class="col-md-3 general-sidebar" id="CategoryGrid">
<h5>Category & Sub Category <span style="color: red;">* </span></h5>
<div class="checkbox">
<label>
<input onclick="checkUncheckAll(this)" type="checkbox">
All
</label>
</div>
<div class="checkbox"><label><input class="cat" type="checkbox" value="Quality">Quality</label></div>
<div class="checkbox"><label><input class="subcat" type="checkbox" value="Planning process and execution">Planning process and execution</label></div>
javascript:
function checkUncheckAll(ele) {
if (ele.checked) {
$('.cat').prop('checked', ele.checked);
$('.subcat').prop('checked', ele.checked);
}
else {
$('.cat').prop('checked', ele.checked);
$('.subcat').prop('checked', ele.checked);
}
}
Antwoord 25
<pre>
<SCRIPT language="javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</SCRIPT>
<HTML>
<HEAD>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
<td>Droid X</td>
<td>4.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td>HTC Desire</td>
<td>3/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
<td>Apple iPhone 4</td>
<td>5/5</td>
</tr>
</table>
</BODY>
</HTML>
</pre>
Antwoord 26
function chek_al_indi(id)
{
var k = id;
var cnt_descriptiv_indictr = eval($('#cnt_descriptiv_indictr').val());
var std_cnt = 10;
if ($('#'+ k).is(":checked"))
{
for (var i = 1; i <= std_cnt; i++)
{
$("#chk"+ k).attr('checked',true);
k = k + cnt_descriptiv_indictr;
}
}
if ($('#'+ k).is(":not(:checked)"))
{
for (var i = 1; i <= std_cnt; i++)
{
$("#chk"+ k).attr('checked',false);
k = k + cnt_descriptiv_indictr;
}
}
}
Antwoord 27
Trigger-klik
$("#checkAll").click(function(){
$('input:checkbox').click();
});
OF
$("#checkAll").click(function(){
$('input:checkbox').trigger('click');
});
OF
$("#checkAll").click(function(){
$('input:checkbox').prop('checked', this.checked);
});