EDIT:
Please read the end part of the post, I know the part that tells which are unchecked needs to be inside the block of code, the issue here is that the first part of the code is not registering the "click". So can't do anything without that.
E2: May take the suggestion of adding a onclick to the boxes, since the code for boxes is generated with JS, I would add it once and all of them will get the function call, but that feels kinda ugly
I have a set of check boxes, and when one is clicked I need to return the values of the unchecked ones.
HTML:
<div id="myCheckboxList">
<input type="checkbox" name="myList" value="1" checked>1
<input type="checkbox" name="myList" value="2" checked>2
<input type="checkbox" name="myList" value="3" checked>3
</div>
JavaScript:
$(function(){
$("input[name=myList]").on("click",function(){
console.log("triggered");
//code here to find which ones are unchecked
});
});
I have tried to also add this in the code
$boxes = $('input[name=myList]:not(:checked)');
$boxes.each(function(){
// Do stuff with for each unchecked box
});
Unfortunatly the "triggered" in not getting output to console, so unsure why it is so, and how would i get an event to happen when the checkboxes are hit
I copied your code directly to a fiddle, and it works fine. You could be missing the jquery library?
EDIT:
Just to be sure, I updated the snippet to generate the inputs, and it still works fine.
$(function() {
var html = '<input type="checkbox" name="myList" value="1" checked>1'
+'<input type="checkbox" name="myList" value="2" checked>2'
+'<input type="checkbox" name="myList" value="3" checked>3';
$("#myCheckboxList").html(html);
$("input[name=myList]").on("click", function() {
console.log("triggered");
//code here to find which ones are unchecked
$boxes = $('input[name=myList]:not(:checked)');
$boxes.each(function() {
console.log($(this).val());
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myCheckboxList">
</div>
Easiest way would be to:
let v = $(this).attr('value');
if(v === 1){ // box 1 selected
Adding this inside your 'click' handler should work.
You need to add your each script inside your click event.
$(function(){
$("input[name=myList]").on("click",function(){
$("input[name=myList]:not(:checked)").each(function() {
console.log($(this).val());
});
});
});
<div id="myCheckboxList">
<input type="checkbox" name="myList" value="1" checked>1
<input type="checkbox" name="myList" value="2" checked>2
<input type="checkbox" name="myList" value="3" checked>3
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Another solution is to add an "onclick" method in your html. This will call a javascript function whenever the checkbox is clicked. That function can contain any logic for your checkboxes.
<input type="checkbox" name="myList" value="1" checked onclick="checkboxChangeEvent();">1
Then you can implement your javascript function to return a list of unchecked boxes or find the input boxes by name and return the alert as in previous answers.
function checkboxChangeEvent(){
$boxes = $('input[name=myList]:not(:checked)');
$boxes.each(function() {
alert($(this).val());
});
}
Try like this:
$(function(){
$("input[name=myList]").on("click",function(){
var uncheck=[];
//console.log("triggered");
//code here to find which ones are unchecked
$boxes = $("input[name=myList]:not(:checked)");
$boxes.each(function(){
// Do stuff with for each unchecked box
uncheck.push($(this).attr('value'))
console.log(uncheck);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myCheckboxList">
<input type="checkbox" name="myList" value="1" checked>1
<input type="checkbox" name="myList" value="2" checked>2
<input type="checkbox" name="myList" value="3" checked>3
</div>
Related
I want to set checkbox checked on document load, if check box value="1", and unchecked if value="0".
<input type="checkbox" value="1">
<input type="checkbox" value="0">
<input type="checkbox" value="1">
Jquery: which is wrong, tried many things
$(document).ready ('input[type="checkbox"]', function(event) {
if ($(this).val==1) {
$(this).is(":checked")
}
});
JSFiddle
.ready() accepts a function as the single parameter which is executed after the DOM is ready.
You do not need any condition to check the value manually. You can simply use attribute selector:
$('input[type=checkbox][value=1]').attr('checked', true);
$(document).ready(function() {
$('input[type=checkbox][value=1]').attr('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="1">
<input type="checkbox" value="0">
<input type="checkbox" value="1">
There are two errors. First this line ready ('input[type="checkbox"]', function(event) { .ready receives a callback function and your code is wrong there. Secondly in if ($(this).val==1) { val is a method. So that will require braces. You can nly use attribute selector and marked it as checked.Also $(this).is(":checked") return a boolean value but it never checks a checkbox
$(document).ready(function() {
$('input[type="checkbox"][value="1"]').prop('checked', true)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="1">
<input type="checkbox" value="0">
<input type="checkbox" value="1">
I have been attempting to allow radio buttons to be deselected using jQuery, but I am running into issues with the prop function. When this code runs, my conditional ($(e.currentTarget).prop('checked')) always evaluates to true.
Here is a fiddle which demonstrates my issue: Jsfiddle
FYI: I am using jQuery 1.8.2, and I cannot update it because it is a legacy project with many dependencies. Also, I MUST use radio buttons per the client's request.
Javascript:
$("input[name=optionMedia]").click(function(e) {
if ($(e.currentTarget).prop('checked')) {
$(e.currentTarget).prop('checked', false);
}
});
Html:
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1"/>
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />
You can do it like this
$('input.bigSizeInput').mouseup(function() {
if ($(this).is(':checked')) {
setTimeout(function() {
$('input.bigSizeInput:checked').prop('checked', false);
}, 1)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1" />
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />
This is because checked is a property. If its there it is true, if its not it is not true. Hence you either should switch to a checkbox or use
$("..").removeProp('checked')
Using checkbox to check/uncheck is better than radio button. But if you want to use radio button, you need to check if radio is checked, copy it using and remove checked attribute of copied element and then insert it after target radio. At the end remove original radio.
$(document).on("mousedown", "input[name=optionMedia]", function(e) {
if (this.checked)
$(this).clone().prop('checked', false).insertAfter(this).end().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<input class="bigSizeInput" type="radio" id="audioVideo" name="optionMedia" value="1"/>
<input class="bigSizeInput" type="radio" id="showReel" name="optionMedia" value="2" />
I have created three checkboxes as follows:
<input type="checkbox" name="upgrade">
<input type="checkbox" name="upgrade">
<input type="checkbox" name="upgrade">
I want these checkboxes to act like radio buttons and using the following jQuery, I am nearly achieving this. I am also using the icheck.js library, so I am doing the jQuery code like this:
$('input[type="checkbox"]').on('ifChanged', function() {
$('input[name="' + this.name + '"]').not(this).iCheck('uncheck');
});
However this is only working with the first change, as soon as I click the third time it doesn't work any longer. Can anyone tell me what I am doing wrong ?
I can not use Icheck plugin but I did with standart checkbox.
$('input[type="checkbox"]').click( function(){
if( $(this).is(':checked') ){
$('input[type="checkbox"]').prop('checked',false);
$(this).prop('checked',true);
}
else {
$(this).prop('checked',true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="upgrade" checked>
<input type="checkbox" name="upgrade">
<input type="checkbox" name="upgrade">
Base on a previous answer, there's no reason for the if statement inside.. this solution will remove all checked, then check the appropriate selection right after.
HTML:
<input type="checkbox" name="upgrade">
<input type="checkbox" name="upgrade">
<input type="checkbox" name="upgrade">
JS:
$('input[type="checkbox"]').click( function(){
$('input[type="checkbox"]').prop('checked',false);
$(this).prop('checked',true);
});
https://jsbin.com/qeqemuqaci/edit?html,js,output
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);
});
});
Below is the my html code:
<input type="checkbox" id="multiOptions" />IsForMultioptions
<input type="radio" value="1" name="option">option1
<input type="radio" value="2" name="option">option2
If I select checkbox i.e. multiOptions then all radio buttons should be convert into checkboxes.
and If I uncheck the checkbox i.e. multiOptions then all checkboxes should convert in radio buttons.
thanks in advance.
You'll need to actually remove and recreate the elements, because IE doesn't let you change the type of an input after it's created.
jQuery makes this fairly easy with replaceWith:
$("selector for the input to change").replaceWith('<input type="checkbox">');
So for instance:
$('input[type="radio"][name="option"]').each(function() {
$(this).replaceWith('<input type="checkbox" name="option" value="' + this.value + '">');
});
Or if the values may contain characters requiring entities:
$('input[type="radio"][name="option"]').each(function() {
var rep = $('<input type="checkbox" name="option">');
rep.attr("value", this.value);
$(this).replaceWith(rep);
});
Instead of replacing the elements you can have two groups of which one is hidden depending on the checkbox:
HTML
<input type="checkbox" id="multiOptions">IsForMultioptions</input>
<div id="radios">
<input type="radio" value="1" name="option">option1</input>
<input type="radio" value="2" name="option">option2</input>
</div>
<div id="checkboxes">
<input type="checkbox" value="1" name="option">option1</input>
<input type="checkbox" value="2" name="option">option2</input>
</div>
jQuery
$(document).ready(function() {
$('#checkboxes').hide();
$('#multiOptions').on('click', function() {
if ($(this).is(':checked')) {
$('#radios').hide();
$('#checkboxes').show();
}
else {
$('#radios').show();
$('#checkboxes').hide();
}
});
});
jsFiddle example.