Here is my fiddle which will select checkbox in the page.
But i wanted to check the group of checkbox with common class name.
Here is the Jsfiddle I have for that.
How can i achieve this ?
Here's the Script i have so far
$(document).ready(function(){
$('.check:button').toggle(function(){
$('input:checkbox').attr('checked','checked');
$(this).val('uncheck all')
},function(){
$('input:checkbox').removeAttr('checked');
$(this).val('check all');
})
})
You should give same class(say checkall) to checkboxes that check/uncheck all elements in group and have a change handler that only target the checkboxes from sibling fieldset of closest p element:
$(".checkall").change(function () {
$(this).closest('p').next().find(':checkbox').prop('checked', $(this).prop("checked"));
});
Working Demo
$("#checkAll1").change(function () {
$(".1").prop('checked', $(this).prop("checked"));
});
$("#checkAll2").change(function () {
$(".2").prop('checked', $(this).prop("checked"));
});
You should use jQuery.data()
$(".js-check-group").change(function () {
var elem = $(this);
$('.' + elem.data('group')).prop('checked', elem.prop("checked"));
});
Demo: http://jsfiddle.net/ScnQT/211/
I would to it like this:
<input type="checkbox" id="checkAll2" class="checkAll"/>
$(".checkAll").change(function () {
var myInputs = $(this).closest("form").find("fieldset input:checkbox");
myInputs.each(function(){
$(this).prop('checked', !$(this).prop("checked"));
});
});
And here the fiddle:
http://jsfiddle.net/ScnQT/208/
You just replace input by your class name.
$("#checkAll1").change(function () {
$(".1:checkbox").prop('checked', $(this).prop("checked"));
});
$("#checkAll2").change(function () {
$(".2:checkbox").prop('checked', $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
<p><label><input type="checkbox" id="checkAll1"/> Check all</label></p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" class="1" /> Option 1</label></p>
<p><label><input type="checkbox" class="1" /> Option 2</label></p>
<p><label><input type="checkbox" class="1" /> Option 3</label></p>
</fieldset>
</form>
<form action="#">
<p><label><input type="checkbox" id="checkAll2"/> Check all</label></p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" class="2" /> Option 1</label></p>
<p><label><input type="checkbox" class="2" /> Option 2</label></p>
<p><label><input type="checkbox" class="2" /> Option 3</label></p>
</fieldset>
</form>
LINK : http://jsfiddle.net/4zpu4m0w/1/
Regards.
Related
I would like to create an alert that displays if none of the choices in my check box have been displayed.
<script>
function mFunction () {
if (!!this.form.checkbox.checked) {
alert('not checked');
return false;
}
};
</script>
js above
<body>
<form>
<input type="checkbox" name="choice1" value="choice1" id="confirm">choice 1<br>
<input type="checkbox" name="choice2" value="choice2" >choice 2<br>
<input type="checkbox" name="choice3" value="choice3">choice 3<br><br>
<input type="submit" value="Submit" onclick="mFunction()">
</form>
I wanted an alert if nothing selected, and no alert if something is selected.
you can check this by
[...document.querySelectorAll("input[type='checkbox']")].some(i=>i.checked)
function mFunction (e)
{
if(![...document.querySelectorAll("input[type='checkbox']")].some(i=>i.checked))
{
alert('not checked');
e.preventDefault();
}
};
function checkForm(t,e) {
e.preventDefault();
console.log('checked');
};
<form onsubmit="checkForm(this,event);">
<input type="checkbox" name="choice1" value="choice1" id="confirm">choice 1<br>
<input type="checkbox" name="choice2" value="choice2" >choice 2<br>
<input type="checkbox" name="choice3" value="choice3">choice 3<br><br>
<input type="submit" value="Submit" onclick="mFunction(event)">
</form>
You can directly check the checked items like below.
function mFunction () {
let matches = document.querySelectorAll('input[type=checkbox]:checked');
if (matches.length < 1) {
alert('not checked');
return false;
}
};
If its plain javascript, you can try adding an event listener when checkbox is clicked.
Maintain an array in the listener. If something is selected maintain a checkbox selection counter or boolean tracking selection.
var checkbox = document.querySelector("input[name=checkbox]");
checkbox.addEventListener( 'change', function() {
if(this.checked) {
// Checkbox is checked..
} else {
// Checkbox is not checked..
}
});
Im getting the result now, but what I want is to Also get the checked input box and put into the input text not just only using on change event in jQuery but also on page loads. As you can see, one of the checkboxes below has been checked but not putting into the input text. Please see my code below:
$(document).ready(function(){
$checks = $(":checkbox");
$checks.on('change', function() {
var string = $checks.filter(":checked").map(function(i,v){
return this.value;
}).get().join(",");
$('#field_results').val(string);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiple">
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1" checked>1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3">3
</div>
<div class="multiple">
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2" checked>2<br>
<input type="checkbox" value="3">3
</div>
You can do this easily like:
$(document).ready(function() {
$checks = $(":checkbox");
$checks.on('change', setResults);
function setResults() {
var string = $checks.filter(":checked").map(function(i, v) {
return this.value;
}).get().join(",");
$('#field_results').val(string);
}
setResults();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="field_results" /><br>
<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2" checked>2<br>
<input type="checkbox" value="3" checked>3
You should set values into input at first, try this:
$(document).ready(function() {
$checks = $(":checkbox");
$('#field_results').val(getCheckedValues());
$checks.on('change', function(){
$('#field_results').val(getCheckedValues());
});
});
function getCheckedValues(){
$checks = $(":checkbox");
var valuse = $checks.filter(":checked").map(function(i, v) {
return this.value;
}).get().join(",");
return valuse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1" checked>1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3" checked>3<br>
<input type="checkbox" value="4">4<br>
<input type="checkbox" value="5" checked>5<br>
The easiest way to do it You can use .trigger() to set default value
$checks.trigger('change');
I want to disable all checkbox when click all 'select all'.
How is this possible using jQuery?
JavaScript:
Here categories[] is name of checkbox which is in foreach loop
function checkAll(source) {
checkboxes = document.getElementsByName('categories[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
//checkboxes[i].checked = source.checked;
checkboxes[i].disabled = source.disabled;
}
}
function uncheckAll() {
$('input:checkbox').removeAttr('checked');
}
function disableAll() {
$('input:checkbox').attr('disabled','true');
}
<input type="checkbox" checked>A<br/>
<input type="checkbox" checked>B<br/>
<input type="checkbox">C<br/>
<input type="checkbox" checked>D<br/>
<input type="checkbox">E<br/>
<button onclick="uncheckAll()">Uncheck all</button>
<button onclick="disableAll()">Disable all</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Just use prop('disabled', true)
$('#mainChk').on('click', function(){
var categories = $('.categories');
categories.prop('disabled', !categories.prop('disabled'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="mainChk" type="checkbox" > Main
<input type="checkbox" class="categories"> First
<input type="checkbox" class="categories"> Second
<input type="checkbox" class="categories"> Third
Give all your checkbox a class (ex: class='ck').
Then :
$('.ck').each(function(){
$(this).prop('disabled', true);
})
This will work for you.
<input type="checkbox" checked>A<br/>
<input type="checkbox" checked>B<br/>
<input type="checkbox">C<br/>
<input type="checkbox" checked>D<br/>
<input type="checkbox">E<br/>
<button class="disableAll">Disable all</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".disableAll").click(function(){
$('input[type=checkbox]').each(function(){
$(this).prop('disabled', true);
})
});
});
you can enable disable checkboxes with jquery like this.
$('#checkAll:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});
Have a look at this demo.
I need a jQuery function that does the following thing: for example, when checkbox1 is checked, when I click on some other elements (with an id starting with element-) I could print the id of these elements in the console as follows:
$('#checkbox1').click(function() {
if ($(this).is(':checked')) {
$(document).on('click','[id^=element-]', function(e) {
console.log(this.id);
});
} else {}
});
I tested this example and it's not working. I have not idea when I'm wrong.
The simplest way to do this would be to invert your logic. That is to say, place the click handler on the required elements and within that check the state of the checkbox. Try this:
$(document).on('click', '[id^="element-"]', function(e) {
if ($('#checkbox1').is(':checked'))
console.log(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="checkbox1" />
Check me!
</label>
<div>
<button id="element-foo">Foo</button>
<button id="element-bar">Bar</button>
</div>
I tested it out, and this will work for you
$("input[id^=d]").on("click", function() {
var id = $(this).prop("id");
if ($("#c1").is(":checked")) {
console.log(id);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Dogs <input id="c1" type="checkbox" />
Cats <input id="d1" type="checkbox" />
Zebras <input id="d2" type="checkbox" />
Rhinos <input id="e1" type="checkbox" />
I have this javascript code
// Listen for click on toggle checkbox
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
});
And I have this
<form action="" method="POST">
Toggle All :
<input type="checkbox" name="select-all" id="select-all" />
then at my table I have multiple checkbox
<input type="checkbox" name="checkbox-1" id="checkbox-1" value="1"> Select
<input type="checkbox" name="checkbox-2" id="checkbox-2" value="2"> Select
<input type="checkbox" name="checkbox-3" id="checkbox-3" value="3"> Select
<input type="checkbox" name="checkbox-4" id="checkbox-4" value="4"> Select
When I click on toggle all, it does not check checkbox-1 to checkbox-4
What went wrong in my javascript code.
Thanks!! I want to actually do a function that will send all the value of checkbox1-4 by post when they are checked on form submit.
Simply do like this.
$('#select-all').click(function(event) {
$(':checkbox').prop("checked", this.checked);
});
You do not need to loop through each checkbox to check all.
Demo
Wrap the code in dom ready if your script is in head tag
$(document).ready(function() {
$('#select-all').click(function(event) {
$(':checkbox').prop("checked", this.checked);
});
});