i have two checkboxes. i want this algorithm happen:
if i check checkbox1 i want checkbox 2 to be uncheck,
then if i check checkbox2 i want checkbox1 to be unchecked.
therefore, i need to select one checkbox only.
and i want this in jquery.
thank you..
HTML
<input type="checkbox" name="checkme" id="cc1">Check Me1</input>
<input type="checkbox" name="checkme" id="cc2">Check Me2</input>
JavaScript
$('#cc1').change(function(){
var c = this.checked ? $('#cc1').prop('checked', true) : $('#cc2').prop('checked', false);
});
$('#cc2').change(function(){
var c = this.checked ? $('#cc2').prop('checked', true) : $('#cc1').prop('checked', false);
});
http://jsfiddle.net/z4nKW/
$('#cc1').change(function(){
$('#cc2').prop('checked', !$(this).prop('checked'));
});
$('#cc2').change(function(){
$('#cc1').prop('checked', !$(this).prop('checked'));
});
Maybe radio buttons are better fit for such case.
THE DEMO>
this, by itself is a javascript element and therefor doesn't have a property "checked".
You need to wrap it in jQuery like so:
$(this).checked
Radio buttons ensure that only one item is selected:
<form>
<input type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">
</form>
source (w3schools)
Use radio buttons:
<input type="radio" name="option">Option 1</input>
<input type="radio" name="option">Option 2</input>
you can also do this
Html:
<input type="checkbox" name="checkme" class="check" id="cc1">Check Me1</input>
<input type="checkbox" name="checkme" class="check" id="cc2">Check Me2</input>
JQuery
$(".check").each(function()
{
$(this).change(function()
{
$(".check").prop('checked',false);
$(this).prop('checked',true);
});
});
Related
I would like to unselect a radio button when I click on the label and the following code only works as expected if I click on the button itself.
How to link the behaviour of the label to the button?
<label>
<input type="radio" name="choice" value="HTML" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false" /> Learn HTML
</label>
<label>
<input type="radio" name="choice" value="Java" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false"/> Learn JavaScript
</label>
Radio buttons don't work like you are thinking they do. To deselect one you need to either select another with the same name attribute or reset the form. The functionality that you are describing fits more with a checkbox than a radio button. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio for the specs. You may also want to take a look at this question/answer: Reset Particular Input Element in a HTML Form.
Also, there is no need to wrap your label tag around the input. The for attribute takes care of the linking.
If you want to de-select a radio button, you will need to reset the form.
form {
display: flex;
flex-direction: column;
}
<form>
<label for="ckb-01">
<input id="ckb-01" type="radio" name="choice" value="HTML" />
Learn HTML
</label>
<label for="ckb-02">
<input id="ckb-02" type="radio" name="choice" value="Java" />
Learn JavaScript
</label>
<label for="ckb-03">
<input id="ckb-03" type="radio" name="choice" value="Java" />
Learn CSS
</label>
<input type="reset" />
</form>
use the attribut for in the label
<label for='idHTML'>Learn HTML </label>
give the radio the id equivalent
<input id='idHTML' type="radio" name="choice" />
what do you mean by this.__chk
onMouseDown="this.__chk = this.checked"
onClick="if (this.__chk) this.checked = false"
if you wanna select just one you could use simply type radio with group the options with one name='choice'
if you want check and uncheck multiple choices you could use checkbox
After many attempts I finally managed to code a working solution with some javascript.
The problem is that as soon as the radio button is clicked its state changes. the previous value needs to be stored in order to know if it has to be unselected or not.
<main id="form">
<label >
<input type="radio" name="rad" id="Radio0" />Learn Html
</label>
<br><br>
<label>
<input type="radio" name="rad" id="Radio1" />Learn CSS
</label>
<br><br>
<label>
<input type="radio" name="rad" id="Radio2" />Learn Java
</label>
</main>
<script>
let buttons = document.querySelectorAll('#form input');
for (button of buttons){
button.dataset.waschecked="false";
button.addEventListener('click', myFunction, false);
}
function myFunction(e) {
if (e.originalTarget.dataset.waschecked == "false"){
for (button of document.querySelectorAll('#form input')){
button.dataset.waschecked = "false";
}
e.originalTarget.dataset.waschecked = "true";
e.originalTarget.checked =true;
}else {
for (button of document.querySelectorAll('#form input')){
button.dataset.waschecked = "false";
}
e.originalTarget.checked =false;
}
}
</script>
Any suggestion to improve this code is welcome.
In my dashboard there are 4 radio button. I need show only one in one condition. And each button has different values
<input type="radio" name="payment_method" id="payment_method" value="Online-Others">
<input type="radio" name="payment_method" id="payment_method" value="Cash">
<input type="radio" name="payment_method" id="payment_method" value="wallet">
<input type="radio" name="payment_method" id="payment_method" value="online">
Here I need to show only cash button. Should I make different ids for each button? Or using this am I able to show that?
You can remove elements by values with a attribute selector:
// removes all 'payment_method' radios where 'value' is not 'Cash'
$(".payment_method[value!=Cash]").remove();
But as ids are unique in HTML, you could (must) better change them:
<input type="radio" name="payment_method" id="payment_method_others" value="Online-Others">
<input type="radio" name="payment_method" id="payment_method_cash" value="Cash">
<input type="radio" name="payment_method" id="payment_method_wallet" value="wallet">
<input type="radio" name="payment_method" id="payment_method_online" value="online">
JS:
// removes all 'payment_method' radios where 'id' is not 'payment_method_cash'
$(".payment_method:not(#payment_method_cash)").remove();
No need to add ID or Class
$('input[name=payment_method][value=wallet]').prop('checked',true); //if you need to highlight "wallet"
$('input[name=payment_method][value=Cash]').prop('checked',true); //if you need to highlight "Cash"
Your question in not much clear for me, are you expecting something like this ?
$('#payment_method_cash').on('change', function() {
// Show cash payment button and options.
console.log('Cash option checked : ' + $(this).prop('checked'));
});
$('#payment_method_wallet').on('change', function() {
// Show wallet payment button and options.
console.log('wallet option checked : ' + $(this).prop('checked'));
});
$('#payment_method_online').on('change', function() {
// Show online payment button and options.
console.log('online option checked : ' + $(this).prop('checked'));
});
$('#payment_method_other').on('change', function() {
// Show other payment button and options.
console.log('Other option checked : ' + $(this).prop('checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="payment_method" id="payment_method_other" value="Online-Others">
<input type="radio" name="payment_method" id="payment_method_cash" value="Cash">
<input type="radio" name="payment_method" id="payment_method_wallet" value="wallet">
<input type="radio" name="payment_method" id="payment_method_online" value="online">
You can remove id attribute and can use value attribute.
html
<input type="radio" name="payment_method" value="Online-Others">
<input type="radio" name="payment_method" value="Cash">
<input type="radio" name="payment_method" value="wallet">
<input type="radio" name="payment_method" value="online">
jquery code will be like
//if you want to show only Cash radio button
$(document).ready(function() {
$("input[value!='Cash']").css('display','none');
});
Alternately if you want to checked one radio button out of four use below jquery.
//if you want to checked Cash radio button out of four use below
$(document).ready(function() {
$("input[value='Cash']").attr('checked','true');
});
Hope it will help.
I have a list of checkboxes like so:
<div class="checkbox-list">
<label><input type="checkbox" value="" /> All items</label><br />
<label><input type="checkbox" value="1" /> First item</label><br />
<label><input type="checkbox" value="2" /> Second item</label><br />
<label><input type="checkbox" value="3" /> Third item</label><br />
<label><input type="checkbox" value="4" /> Forth Checkbox</label>
</div>
The behavior I am looking for is if I select the first checkbox in this div (.checkbox-list input[type=checkbox]:first) all other checkboxes after is checked off. Likewise if I select any other than the first, the first one is deselected.
I am struggling on how to check if the first one is clicked on?
$(".checkbox-list").on("change", "input[type=checkbox]", function () {
if ($(this).first()) { // <- not working - how do I know if I clicked the first one?
$("input[type=checkbox]:checked", ".checkbox-list").not(this).prop("checked", false);
$(this).prop("checked", true);
} else {
// Uncheck first checkbox
}
});
Here is a fiddle if you wish to play around: http://jsfiddle.net/4c7aubqL/1/
jsBin demo
$(".checkbox-list").on("change", ":checkbox", function() {
var $all = $(".checkbox-list").find(":checkbox");
var $first = $all.eq(0);
if ($first.is(":checked")) {
$all.not(this).prop("checked", false);
}
});
You should be using radio buttons, not checkboxes. That will do exactly what you want, with no additional effort on your part. Even if you succeed in what you are trying to do, the user interface will look wrong.
I have to control the checked status a list of checkboxes from another checkbox.
HTML:
<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" name="recipe.read" type="checkbox" value="1" rel="read">
<input id="group.read" name="group.read" type="checkbox" value="1" rel="read">
<input id="ingredients.read" name="ingredients.read" type="checkbox" value="1" rel="read">
</div>
JS:
$('#readall').click(function()
{
var checkStatus = $(this).is(':checked');
var checkboxList = $('#permGrid input[rel="read"]');
$(checkboxList).attr('rel', 'read').each(function(index)
{
if(checkStatus == true)
{
$(this).attr('checked', 'checked');
console.log($(this).attr('checked'));
}
else
{
$(this).removeAttr('checked').reload();
console.log($(this).attr('checked'));
}
});
});
The above code seems fine but the check/uncheck works only for the first time. But when I click the main checkbox second time, it doesn't change the status of other checkboxes into 'checked'. Is there anything I need to do?
I found something similar here. I compared the code and mine and this code is somewhat similar but mine doesn't work.
Try using prop, and shorten the code alot like this
$('#readall').click(function () {
var checkboxList = $('#permGrid input[rel="read"]')
checkboxList.prop('checked', this.checked);
});
DEMO
You can't use a method .reload like this
$(this).removeAttr('checked').reload();
// returns Uncaught TypeError: Object #<Object> has no method 'reload'
Remove it, and it will work.
JSFiddle
Use a class for all the checkboxes which you need to change on click of some checkbox. Like:
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
I have added a class="toChange" to all the checkboxes except the first one.
<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
<input id="group.read" class="toChange" name="group.read" type="checkbox" value="1" rel="read" />
<input id="ingredients.read" class="toChange" name="ingredients.read" type="checkbox" value="1" rel="read" />
</div>
Then use the following script:
$('#readall').click(function(){
var checkStatus = $(this).is(':checked');
if(checkStatus){
$(".toChange").attr('checked', 'checked');
}
else{
$(".toChange").removeAttr('checked')
}
});
Demo
I have a set of checkboxes that have a name like
form[check][..]
where .. is a number (id). I would have another checkbox that checked would check all the previous checkboxes, a sort of check/uncheck all. The problem is, how can with jQuery get all that checkboxes?
EDIT 1
this is my current html markup:
<input type="checkbox" value="1" name="form[check][1]" />
<input type="checkbox" value="1" name="form[check][2]" />
<input type="checkbox" value="1" name="form[check][3]" />
<input type="checkbox" value="1" name="form[check][..]" />
<input type="checkbox" name="checkAll" />
Add a class to the checkboxes you want checked, and select them using that class
$('.myCheckbox').prop('checked', true);
$('[name="checkAll"]').on('change', function(){
$('input[name^="form[check]"]:checkbox').prop('checked', $(this).prop('checked'));
});