How to change checkbox value?

How to change checkbox value? - javascript

change value of checkbox doesn't work.
This is my code:
$(document).change('add',function() {
$(".activateuploadedpic").click(function(){
if ($(this).val()=='true') {
$(this).attr('value','false');
}
else {
$(this).attr('value','true');
}
});
});

You can change to this:
$(".activateuploadedpic").click(function () {
$(this).attr("value", $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="false" class="activateuploadedpic" />

Related

jQuery - Checkboxes are not updating text

I'm currently returning a couple of texts based on which checkboxes being checked. I've added a single checkbox to automatically check all the countries but that doesn't return any text in return. Can't figure out what I am doing wrong.
Here is the code and fiddle:
HTML
<p><label><input type="checkbox" id="checkCountries" /> Check Countries</label></p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" value="1" /> USA</label></p>
<p><label><input type="checkbox" value="2" /> Canada</label></p>
<p><label><input type="checkbox" value="3" /> UK</label></p>
<p><label><input type="checkbox" value="4" /> Spain</label></p>
<p><label><input type="checkbox" value="10" /> Male</label></p>
<p><label><input type="checkbox" value="11" /> Female</label></p>
</fieldset>
<div class="print"></div>
<div class="print2"></div>
<div class="print3"></div>
<div class="print4"></div>
<div class="print10"></div>
<div class="print11"></div>
And jQuery
$("#checkCountries").change(function() {
$("input[value='1']").prop('checked', $(this).prop("checked"));
$("input[value='2']").prop('checked', $(this).prop("checked"));
$("input[value='3']").prop('checked', $(this).prop("checked"));
$("input[value='4']").prop('checked', $(this).prop("checked"));
});
$(document).ready(function() {
$('.print').val($(this).is(':checked'));
$('input[value="1"]').change(function() {
if ($(this).is(":checked")) {
$(this).attr("checked", $('.print').text("USA is Checked"));
} else {
$('.print').empty();
}
$('.print').val($(this).is(':checked'));
});
$('input[value="2"]').change(function() {
if ($(this).is(":checked")) {
$(this).attr("checked", $('.print2').text("Canada is Checked"));
} else {
$('.print2').empty();
}
$('.print2').val($(this).is(':checked'));
});
$('input[value="3"]').change(function() {
if ($(this).is(":checked")) {
$(this).attr("checked", $('.print3').text("UK is Checked"));
} else {
$('.print3').empty();
}
$('.print3').val($(this).is(':checked'));
});
$('input[value="4"]').change(function() {
if ($(this).is(":checked")) {
$(this).attr("checked", $('.print4').text("Spain is Checked"));
} else {
$('.print4').empty();
}
$('.print4').val($(this).is(':checked'));
});
$('input[value="10"]').change(function() {
if ($(this).is(":checked")) {
$(this).attr("checked", $('.print10').text("Male is Checked"));
} else {
$('.print10').empty();
}
$('.print10').val($(this).is(':checked'));
});
$('input[value="11"]').change(function() {
if ($(this).is(":checked")) {
$(this).attr("checked", $('.print11').text("Female is Checked"));
} else {
$('.print11').empty();
}
$('.print11').val($(this).is(':checked'));
});
});
https://jsfiddle.net/gf28v9x5/3/

You need to explicitly trigger change event.
Note that change event only triggers by user actions on that particular element.
What I did,
Just triggered when changing check/uncheck
$("input[value='1']").prop('checked', $(this).prop("checked")).trigger('change');
Like https://jsfiddle.net/4ktbjwL2/1/
$("#checkCountries").change(function () {
$("input[value='1']").prop('checked', $(this).prop("checked")).trigger('change');
$("input[value='2']").prop('checked', $(this).prop("checked")).trigger('change');
$("input[value='3']").prop('checked', $(this).prop("checked")).trigger('change');
$("input[value='4']").prop('checked', $(this).prop("checked")).trigger('change');
});
$(document).ready(function() {
$('.print').val($(this).is(':checked'));
$('input[value="1"]').change(function() {
if($(this).is(":checked")) {
$(this).attr("checked", $('.print').text("USA is Checked"));
} else {
$('.print').empty();
}
$('.print').val($(this).is(':checked'));
});
$('input[value="2"]').change(function() {
if($(this).is(":checked")) {
$(this).attr("checked", $('.print2').text("Canada is Checked"));
} else {
$('.print2').empty();
}
$('.print2').val($(this).is(':checked'));
});
$('input[value="3"]').change(function() {
if($(this).is(":checked")) {
$(this).attr("checked", $('.print3').text("UK is Checked"));
} else {
$('.print3').empty();
}
$('.print3').val($(this).is(':checked'));
});
$('input[value="4"]').change(function() {
if($(this).is(":checked")) {
$(this).attr("checked", $('.print4').text("Spain is Checked"));
} else {
$('.print4').empty();
}
$('.print4').val($(this).is(':checked'));
});
$('input[value="10"]').change(function() {
if($(this).is(":checked")) {
$(this).attr("checked", $('.print10').text("Male is Checked"));
} else {
$('.print10').empty();
}
$('.print10').val($(this).is(':checked'));
});
$('input[value="11"]').change(function() {
if($(this).is(":checked")) {
$(this).attr("checked", $('.print11').text("Female is Checked"));
} else {
$('.print11').empty();
}
$('.print11').val($(this).is(':checked'));
});
});
<p><label><input type="checkbox" id="checkCountries"/> Check Countries</label></p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" value="1" /> USA</label></p>
<p><label><input type="checkbox" value="2" /> Canada</label></p>
<p><label><input type="checkbox" value="3" /> UK</label></p>
<p><label><input type="checkbox" value="4" /> Spain</label></p>
<p><label><input type="checkbox" value="10" /> Male</label></p>
<p><label><input type="checkbox" value="11" /> Female</label></p>
</fieldset>
<div class="print"></div>
<div class="print2"></div>
<div class="print3"></div>
<div class="print4"></div>
<div class="print10"></div>
<div class="print11"></div>

I think the better approach is to have single code block defining the checkbox click handler dynamically for each of the checkboxes
I have created a fiddler like below
$('.chkCountry').change(function() {
const val = $(this).val();
const text = $(this).attr('data');
if($(this).is(":checked")) {
$('.print' + val).html(text + " is Checked");
} else {
$('.print' + val).html("");
}
});
https://jsfiddle.net/muasif80/7wujn196/8/

You can give the same class name to all country and print the text as below
I have created a fiddler like below:
$("#checkCountries").change(function () {
if ($(this).is(":checked")) {
$('.chkcountery').prop('checked', true);
$('.Text').html("USA is Checked<br/>Canada is Checked <br />UK is Checked <br /> Spain is Checked");
}
else {
$('.chkcountery').prop('checked', false);
$('.Text').text('');
}
})
https://jsfiddle.net/k391bhrg/9/

Show/hide div on radio button and change form action

<form action ="one.php" method="post">
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db">
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">
<div id="a">Hi</div>
<div id="b">Hellow</div>
</form>
I have a form in which there are two radio buttons and two divs.If I selected radio button with id=one then div with id="a" shud be shown and other div will be hidden and form action will be one.php. and if I select radio button with id="two",div with id="b" will be shown and form action changes to "two.php"..How can this be done using jquery or javascript.Any help.

<form id="myForm" action ="one.php" method="post">
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db" checked>
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">
<div id="a">Hi</div>
<div id="b">Hellow</div>
</form>
css:
#b{
display:none;
}
Script
$(document).ready(function () {
$(".css-checkbox").click(function () {
if ($(this).attr('id') == "one") {
$('#a').show();
$('#b').hide();
$("#myForm").attr('action','one.php');
} else {
$('#a').hide();
$('#b').show();
$("#myForm").attr('action','two.php');
}
});
});
FIDDLE

try this
$('input[type=radio].css-checkbox').click(function(){
if (this.id=="one"){
$('div#a').show();
$('div#b').hide();
$('form').attr('action','one.php');
}
else {
$('div#a').hide();
$('div#b').show();
$('form').attr('action','two.php');
}
});
DEMO HERE

Try this
$(document).ready(function () {
$('div').hide()
$(".css-checkbox").click(function () {
if ($(this).attr('id') == "one") {
$('#a').fadeIn().siblings('div').fadeOut()
$("form").attr('action','one.php');
} else {
$('#b').fadeIn().siblings('div').fadeOut()
$("form").attr('action','two.php');
}
});
});
DEMO

Try this: jsfiddle
jQuery("[name='cardType']").click(function(){
var divs = $(this).parent().find(">div");
divs.hide();
if(this.id === 'one'){
$("#a").show();
}else{
$("#b").show();
}
});

$(function () {
$('input[name=cardType]').click(function () {
var id_checked = $('input[name=cardType]:radio:checked').attr('id');
if (id_checked == 'one') {
$('#a').show();
$('#b').hide();
} else if (id_checked == 'two') {
$('#a').hide();
$('#b').show();
}
$('form').attr('action', id_checked + '.php');
});
});

check all checkbox with hide

How do I add a checkbox that can check all the checkboxes if it's checked?
How can I add show/hide functionality to the "check all" checkbox.
The submit button also need to be showed if the check all checkbox is checked.
$(document).ready(function() {
var $submit = $("#submit_prog").hide(),
$cbs = $('input[name="prog"]').click(function() {
$submit.toggle( $cbs.is(":checked") );
});
});
<input type="checkbox" name="?" value="?"> // check all checkbox
<input type="checkbox" name="prog" value="1">
<input type="checkbox" name="prog" value="2">
<input type="submit" id="submit_prog" value='Submit' />

assumption id of select all chckbox is selall.
create a class for all the check box you want to select using select all
$('#selall').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$('.yourchckbox').each(function() {
this.checked = true;
});
$('#submit_prog').show();
}
else {
$('.yourchckbox').each(function()
{ this.checked = false; });
$('#submit_prog').hide()
}
});
$('.yourchckbox').click(function(event) {
if(!(this.checked)) {
$('#selall').prop('checked', false);
}
});

Give the select all check box an id, say selectall then
$('#selectall').click(function(){
if (this.checked){
$('input[name="prog"]').prop('checked', true);
$submit.toggle( true );
}
});
if you want the checkboxes to be unselected if the select all in unselected
$('#selectall').click(function(){
$('input[name="prog"]').prop('checked', this.checked);
$submit.toggle( this.checked);
});
$cbs = $('input[name="prog"]').click(function() {
$submit.toggle( $cbs.filter(':checked').length == 0 );
if (!this.checked) $('#selectall').prop('checked', false);
});

Try
$('input:checkbox[name!="prog"]').click(function(){
$('input:checkbox[name="prog"]').prop('checked', $(this).is(':checked'))
})
Or if you can change checkbox id to selall
$('#selall').click(function(){
$('input:checkbox').prop('checked', $(this).is(':checked'))
})

Its quite simple.
lets name this checkbox <input type="checkbox" name="check_all" value="1">
And now add event:
$('input[name="check_all"]').click( function() {
if( $(this).is(':checked') ) {
$('input[name="prog"]').attr('checked', 'checked');
} else {
$('input[name="prog"]').removeAttr('checked');
}
$('input[name="prog"]:eq(0)').change(); //firing event which we will catch
});
Then we should check if all input[name="prog"] are checked:
$('input[name="prog"]').change( function() {
if( $('input[name="prog"]:not(:checked)').length ) {
$('#submit_prog').hide();
} else {
$('#submit_prog').show();
}
});

select all checkboxes on #all check and check #all when all checkboxes are checked
<SCRIPT language="javascript">
$(function(){
$("#all").click(function () {
$('.one').attr('checked', this.checked);
if (this.checked) {$('#submit_prog').hide();}
(this.checked)?$('#submit_prog').show():$('#submit_prog').hide();
});
$(".one").click(function(){
if($(".one").length == $(".one:checked").length) {
$("#all").attr("checked", "checked");
$('#submit_prog').show();
} else {
$("#all").removeAttr("checked");
$('#submit_prog').hide();
}
});
});
</SCRIPT>
Change id and class of checkboxes
<input type="checkbox" id="all" > // check all checkbox
<input type="checkbox" name="prog" class="one" value="1">
<input type="checkbox" name="prog" class="one" value="2">

When I will click on a href link it will check all checkbox after related this link

I have a links named All and none. When I click on All, I want it to check all checkboxes related with it and change it's link text to none.
When I click again I want it to uncheck all of the checkboxes.
I have some code which I can use to check all boxes with a checkbox. But now I want to check all boxes with a link. Please see, here is this demo code (also on jsfiddle):
<script type="text/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");
}
});
});
$(document).ready(function () {
$("input[type=checkbox]").click(updateCount);
updateCount();
function updateCount () {
var count = $("input[type=checkbox].case:checked").length;
$("#count").text(count);
$("#status").toggle(count > 0);
};
});
</script>enter code here
</head>
<body>
<H2>why counting wrong in crome, Ie </H2>
select all
<input type="checkbox" id="selectall"/>
<input type="checkbox" class="case" name="case" value="1"/>
<input type="checkbox" class="case" name="case" value="2"/>
<input type="checkbox" class="case" name="case" value="3"/>
<input type="checkbox" class="case" name="case" value="4"/>
<input type="checkbox" class="case" name="case" value="5"/>
<div id="status">
<p id="count">0</p>
</div>
</body>
http://jsfiddle.net/kdEmH/24/

Try to get it this way, i just guessed a link <a> with an id of #allNone and put the .prop() function to check and uncheck the checkboxes:
$('#allNone').on('click', function (e) {
e.preventDefault();
(this.text == 'Check All') ?
$(this).text('Check None').nextAll('.case').prop('checked', true) :
$(this).text('Check All').nextAll('.case').prop('checked', false);
});
Demo

In your HTML part, add a link like :
Click me to toggle all checkboxes
In your Javascript part, add :
$("a#select_all_link").click(function(){
if($('.case:checked').length > 0)
$('.case').attr('checked', false);
else
$('.case').attr('checked', true);
});
Please see working example here
Edit : Names now changed wrt checkboxes state (checked or not)

Try this: Demo :
Add a <A> tag to html code:
<a id="selectall" href="#">select all</a>
Add this function to java-script code:
$(function(){
var state=true;
$("#selectall").click(function () {
$('.case').attr('checked', state);
state=!state;
var obj = document.getElementById("selectall");
if(state)
{
obj.innerText="select all";
}
else
{
obj.innerText="clear all";
}
});
Complete Code
$(function(){
var state=true;
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', state);
state=!state;
var obj = document.getElementById("selectall");
if(state)
{
obj.innerText="select all";
}
else
{
obj.innerText="clear all";
}
});
// 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");
}
});
});
$(document).ready(function () {
$("input[type=checkbox]").click(updateCount);
updateCount();
function updateCount () {
var count = $("input[type=checkbox].case:checked").length;
$("#count").text(count);
$("#status").toggle(count > 0);
};
});

Might not be what you're looking for, but it's a quick way of doing the toggle thing:
$('a').click(function() {
var $cbs = $('.case');
$cbs.prop('checked', !$cbs.prop('checked'));
return false;
});

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
All
<input type="checkbox" class="case" value="1"/>
<input type="checkbox" class="case" value="2"/>
<input type="checkbox" class="case" value="3"/>
<input type="checkbox" class="case" value="4"/>
<input type="checkbox" class="case" value="5"/>
<div id="status">
<p id="count">0</p>
</div>
</body>
<script type="text/javascript">
$("document").ready(function() {
$("#link").click(function(){
$a = $(this);
var action = $a.data('action');
if(action == "all"){
$('.case').attr("checked","true");
$a.text("None").data("action","none");
}
if(action == "none"){
$('.case').removeAttr("checked");
$a.text("All").data("action","all");
}
updatecount();
return false;
})
$(".case").click(function(){
if($(".case").length == $(".case:checked").length){
$("#link").text("None").data("action","none");
}else{
$("#link").text("All").data("action","all");
}
updatecount();
})
})
var updatecount = function(){
$("#count").text($(".case:checked").length);
}
</script>
</html>

Checking all checkboxes at once with Javascript

This function alerts right totalqt only when I check checkboxes one by one. But doesn't work properly for #check_all: alerts totalqt = 0.
What I did wrong, can anyone explain?
var totalqt=0;
$('#check_all').click( function() {
$('.checkbox').click();
alert(totalqt);
} );
$('.checkbox').click(function(e) {
e.stopPropagation();
if($(this).closest("tr").not('#hdr').hasClass("row_selected")){
$(this).closest("tr").not('#hdr').removeClass("row_selected");
totalqt=totalqt - parseInt($(this).closest("tr").find("#qt").text(), 10);
}
else {
$(this).closest("tr").not('#hdr').addClass("row_selected");
totalqt=totalqt + parseInt($(this).closest("tr").find("#qt").text());
}
HTML looks like that
<tr>
...
<td><input type="checkbox" name="checkbox[]" method="post" value="" class="checkbox"/></td>
...
</tr>

actually when the checkbox is changed manualy it doesn't trigger handler. try something like this.
function doIt(obj){
if($(obj).closest("tr").not('#hdr').hasClass("row_selected")){
$(obj).closest("tr").not('#hdr').removeClass("row_selected");
totalqt=totalqt - parseInt($(obj).closest("tr").find("#qt").text(), 10);
}
else {
$(obj).closest("tr").not('#hdr').addClass("row_selected");
totalqt=totalqt + parseInt($(obj).closest("tr").find("#qt").text());
}
}
then
$('.checkbox').click(function(e) {
e.stopPropagation();
doIt(this);
});
and
$('#check_all').click( function() {
if($(this).prop('checked')){
$('.checkbox').each(function(){
$(this).prop('checked', true);
doIt(this);
alert(totalqt);
});
}else{
$('.checkbox').each(function(){
$(this).prop('checked', false);
doIt(this);
alert(totalqt);
});
}
} );

I have changed my answer to the following, try this:
<div class="checkall">
<input type="checkbox" id="checkall">
</div>
<div id="list">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
and jquery:
var checkboxes = $(":checkbox", "#list").change(function() {
var allIsChecked = checkboxes.length === checkboxes.filter(":checked").length;
checkAll[0].checked = allIsChecked;
});
var checkAll = $("#checkall").change(function() {
checkboxes.prop("checked",this.checked);
});

Develop Reference

JavaScript is the programming language of the Web.

How to change checkbox value? - javascript

change value of checkbox doesn't work. This is my code: $(document).change('add',function() { $(".activateuploadedpic").click(function(){ if ($(this).val()=='true') { $(this).attr('value','false'); } else { $(this).attr('value','true'); } }); });

You can change to this: $(".activateuploadedpic").click(function () { $(this).attr("value", $(this).prop("checked")); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" value="false" class="activateuploadedpic" />

Related

jQuery - Checkboxes are not updating text

Show/hide div on radio button and change form action

check all checkbox with hide

When I will click on a href link it will check all checkbox after related this link

Checking all checkboxes at once with Javascript

Categories

Resources