I have this code:
$("input.box[type=checkbox]").each(function() {
var name = $(this).attr('name');
if ($.cookie(name) && $.cookie(name) == "true") {
$(this).prop('checked', $.cookie(name));
}
});
$("input.box[type=checkbox]").change(function() {
var name = $(this).attr("name");
$.cookie(name, $(this).prop('checked'), {
path: '/',
expires: 365
});
});
and html:
<input type="checkbox" name="smth1" />something1<br />
<input type="checkbox" name="smth2" />something2<br />
<input type="checkbox" name="smth3" />something3<br />
<input type="checkbox" name="smth4" />something4<br />
<br />
<input type="checkbox" name="anthr1" />anotherthing1<br />
<input type="checkbox" name="anthr2" />anotherthing2<br />
<input type="checkbox" name="anthr3" />anotherthing3<br />
<input type="checkbox" name="anthr4" />anotherthing4<br />
<br />
<input type="checkbox" name="new1" />newthing1<br />
<input type="checkbox" name="new2" />newthing2<br />
<input type="checkbox" name="new3" />newthing3<br />
<input type="checkbox" name="new4" />newthing4<br />
etc etc
This makes cookie for every checkbox. What I want to do is save checkboxes status in only one cookie. I'd appreciate your help! Thanks!
Related
I have a sequence of checkboxes that can be disabled or not through the disabled in the input tag
By clicking on the parent checkbox, I need only those NOT disabled to be checked
Current and desired:
Code so far:
$("#checkAll").click(function () {
$("input:checkbox").not(this).prop("checked", this.checked);
});
You could use the :not() selector combined with the has attribute selector :
$("#checkAll").change(function () {
$("input:checkbox:not([disabled])").prop("checked", this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
As suggested by #connexo, you should use .change() instead of .click(). See this answer for more information.
Vanilla JS, always preferred:
document.getElementById('checkAll').addEventListener('change', function() {
for (const cb of document.querySelectorAll('input[type=checkbox]:not([disabled])')) {
if (cb !== this) cb.checked = this.checked;
}
});
<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
here is the html:
<input id="globalchecker" type="checkbox"/>
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
and here is the jquery:
$('#globalchecker').on('click', function () {
if($('#globalchecker').is(":checked")){
$('.childcheckboxes:checkbox').prop('checked',true);
}
else{
$('.childcheckboxes:checkbox').prop('checked', false);
}
});
when clicking the '#globalchecker' checkbox, the '.childcheckboxes' don't get checked/un-checked. What am I doing wrong?
Here is your code this works perfectly.
$('#globalchecker').on('click', function () {
if($('#globalchecker').is(":checked")){
$('.childcheckboxes:checkbox').prop('checked',true);
}
else{
$('.childcheckboxes:checkbox').prop('checked', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="globalchecker" type="checkbox"/>
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
$('#globalchecker').on('change', function() { //use change
$('.childcheckboxes:checkbox').prop('checked', $(this).is(":checked")); //use the state of #globalchecker as parameter for checked or not to make it 1 liner
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="globalchecker" type="checkbox" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
Use change event
Seems like you are mostly correct. Here's my version:
var $globalChecker = $('#globalchecker');
var $children = $('.child');
$globalChecker.on('click', function() {
if ( $(this).is(":checked") ) {
$children.prop('checked',true);
} else {
$children.prop('checked', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='item-list'>
<li class='item'>
<label class='input-w'> <!-- probably put them all in labels like this -->
<span class='label'>global?</span>
<input type="checkbox" id="globalchecker" />
</label>
</li>
<li class='item'>
<input type="checkbox" class='child'/>
</li>
<li class='item'>
<input type="checkbox" class='child'/>
</li>
<li class='item'>
<input type="checkbox" class='child'/>
</li>
<li class='item'>
<input type="checkbox" class='child'/>
</li>
</ul>
Use JQuery change on all checkboxes. Below code checks, if all checkboxes are checked, then even global gets checked. Also, if you click global checkbox then all children checkboxes gets checked too (works two-way):
$('#globalchecker').on('change', function() {
$('.childcheckboxes:checkbox').prop('checked', $(this).is(":checked"));
});
$('.childcheckboxes').on('change', function() {
if ($('.childcheckboxes').length == $('.childcheckboxes:checked').length) {
$('#globalchecker').prop('checked', true);
} else {
$('#globalchecker').prop('checked', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="globalchecker" type="checkbox" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
$('#globalchecker').on('click', function () {
if($('#globalchecker').is(":checked")){
$('.childcheckboxes:checkbox').prop('checked',true);
}
else{
$('.childcheckboxes:checkbox').prop('checked', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="globalchecker" type="checkbox"/> Global Checkbox
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
<input type="checkbox" class="childcheckboxes" />
Your code working fine for me, here is my solution.
Instead of using if else you can you can use the current state of the global checkbox.
$('#globalchecker').on('click', function() {
var isGlobalChecked = $('#globalchecker').is(":checked");
$('.childcheckboxes:checkbox').prop("checked", isGlobalChecked);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
global<input id="globalchecker" type="checkbox" />
<br/>
<br/> one
<input type="checkbox" class="childcheckboxes" /> two
<input type="checkbox" class="childcheckboxes" /> three
<input type="checkbox" class="childcheckboxes" /> four
<input type="checkbox" class="childcheckboxes" />
I am trying to select and return some items(checkbox). Everything is okay, but the first item is always showing UNDEFINED. can't fix this problem!
My code is as below
function checkList () {
var checked;
var i;
for( i = 0; i < document.form1.length; i++) {
var element = document.form1[i]
if (element.type == "checkbox"){
if (element.checked == true){
checked = checked + element.value + "<br/>";
}
}
}
document.getElementById('checked').innerHTML = checked;
}
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2" >Book</label>
<br/>
<input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox3">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>
Try to Change
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2" for="checkbox">Book</label>
<br/>
<input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox3" for="checkbox" for="checkbox">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>
to This....
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2">Book</label>
<br/>
<input type="checkbox" name="checkbox3" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox4" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>
You have multiple duplications within the code such as (for="")
Let me know, Thanks
Change
var checked; // like this, checked is undefined
to
var checked = ""; // now it's simply empty
here's a fiddle
http://jsfiddle.net/sq9938b0/
The issue is that you initialize checked variable as undefined. When you append the string to undefined it is converted to string "undefined", hence it appearing at the beginning.
Just initialize it as an empty string: var checked = "";
function checkList () {
var checked = "";
var i;
for( i = 0; i < document.form1.length; i++) {
var element = document.form1[i]
if (element.type == "checkbox"){
if (element.checked == true){
checked = checked + element.value + "<br/>";
}
}
}
document.getElementById('checked').innerHTML = checked;
}
<form name="form1">
<input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
<label value="Earned" for="checkbox1">Pen</label>
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
<label value="Earned" for="checkbox2" for="checkbox">Book</label>
<br/>
<input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
<label value="Earned" for="checkbox3" for="checkbox" for="checkbox">Sharpner</label>
<br/>
<input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
<label value="Earned" for="checkbox4">Pencil</label>
<br/> <br/>
<input type="button" id="done" value="Done" onclick="checkList()" />
<br/><br/>
</form>
<p >You are taking:</p>
<span id="checked"></span>
Take a look of the following step
checked = checked + element.value + "";
In the first loop you have not defined checked. So first time it is
checked = undefined + pen
Intialize
var checked = ''
I have a form that finds lost and found items.
<input type="radio" name="subcatitemlost" value="subDiv1" />Luggage
<div id="subDiv1" class="desc">
<label>
<input type="radio" name="subluggage" id="truck" value="t" />
</label>Trunk</br>
<label>
<input type="radio" name="subluggage" id="chest" value="chest" />
</label>Chest</br>
<label>
<input type="radio" name="subluggage" id="suitcase" value="suitcase" />
</label>Suitcase</br>
<label>
<input type="radio" name="subluggage" id="duffelbag" value="duffelbag" />
</label>Duffelbag</br>
<label>
<input type="radio" name="subluggage" id="tote" value="tote" />
</label>Tote</br>
</div>
<br />
<input type="radio" name="subcatitemlost" value="subDiv2" />Clothing
<div id="subDiv2" class="desc">
<input type="radio" name="subclothing" id="shirt" value="shirt" />
</label>Shirt</br>
<input type="radio" name="subclothing" id="shoes" value="shoes" />
</label>Shoes</br>
<input type="radio" name="subclothing" id="pants" value="pants" />
</label>Pants</br>
<input type="radio" name="subclothing" id="jacket" value="jacket" />
</label>Jacket</br>
<input type="radio" name="subclothing" id="suit" value="suit" />
</label>Suit</br>
<input type="radio" name="subclothing" id="hat" value="hat" />
</label>Hat</br>
</div>
<br />
The main categories will unselect themselves upon selection of another main category , however , the subcategories will remain selected and I cannot figure how to control that.I am looking for the script that doesn't allow another subcategory to be selected when the correct button is selected.
$(document).ready(function () {
$("div.desc").hide();
$("input[name$='subcatitemlost']").click(function () {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});
Try using this
$(document).ready(function() {
$("div.desc").hide();
$("input[name$='subcatitemlost']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
$("div input:radio").attr('checked', false);
});
});
http://jsfiddle.net/dbtA4/
How can I use jQuery to delete the text in the textarea that gets from the input_one when it not checked (one_1 one_3 one_4) ,and when it checked add it into textarea again?
The code is below:
<div id="input_one">
<input type="checkbox" value="one">
<input type="checkbox" value="one_1">
<input type="checkbox" value="one_2">
<input type="checkbox" value="one_3">
<input type="checkbox" value="one_4">
</div>
<div id="input_two">
<input type="checkbox" value="two_1">
<input type="checkbox" value="two_2">
<input type="checkbox" value="two_3">
<input type="checkbox" value="two_4">
<input type="checkbox" value="two_5">
</div>
<textarea id="get_checked"></textarea>
For example textarea value should be one one_3 two_4
Hope this helps
function updateTextArea() {
var allVals = [];
$('#input_one :checked,#input_two :checked').each(function () {
allVals.push($(this).val());
});
$('#get_checked').val(allVals);
}
$(function () {
$('#input_one input,#input_two input').click(updateTextArea);
});
jsfiddle
You can select checked checkbox using :checked selector and use .map() to replace item of checkboxs array with value of it.
$("#input_one :checkbox, #input_two :checkbox").change(function() {
var text = $("#input_one :checked, #input_two :checked").map(function() {
return this.value;
}).get().join(" ");
$("#get_checked").val(text);
});
$(":checkbox").change(function() {
var text = $(":checked").map(function() {
return this.value;
}).get().join(" ");
$("#get_checked").val(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input_one">
<input type="checkbox" value="one" />
<input type="checkbox" value="one_1" />
<input type="checkbox" value="one_2" />
<input type="checkbox" value="one_3" />
<input type="checkbox" value="one_4" />
</div>
<div id="input_two">
<input type="checkbox" value="two_1" />
<input type="checkbox" value="two_2" />
<input type="checkbox" value="two_3" />
<input type="checkbox" value="two_4" />
<input type="checkbox" value="two_5" />
</div>
<textarea id="get_checked"></textarea>
As you said in question, the resutl text splited by space.