How can I target unchecked checkboxes in jQuery? - javascript

When I uncheck any checkbox it also appends the result. I want to remove that. What should I do?
$(document).ready(function(){
$('.chk_val').on('click',function(){
var result = $(this).val();
$('#course').append(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="chk_val" value="20" />20
<br />
<input type="checkbox" class="chk_val" value="30" />30
<br />
<input type="checkbox" class="chk_val" value="40" />40
<br />

$(document).ready(function() {
$('.chk_val').on('click', function() {
var result = $('.chk_val:checked').map(function() {
return $(this).val()
}).get();
$('#course').html(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="chk_val" value="20" />20
<br />
<input type="checkbox" class="chk_val" value="30" />30
<br />
<input type="checkbox" class="chk_val" value="40" />40
<br />
Map the value of checked items.
Use .html() to change the html of the div

Related

fetch input attributes and make a multidimensional array with index in jquery

i have some input fields
<input class="first" type="text" unique="001" value="2" />
<input class="second" id="001" type="text" value="2" />
<input class="first" type="text" unique="002" value="3" />
<input class="second" id="002" type="text" value="2" />
<input class="first" type="text" unique="003" value="4" />
<input class="second" id="003" type="text" value="3" />
I want to generate a multidimensional array like this
a={
{value:2, unique:001, value2:2},
{value:3, unique:002, value2:2},
{value:4, unique:003, value2:3},
}
What i tried is
$(".first").each(function() {
var a={};
var x=a['value']=$(this).val();
var y=a['unique']=$(this).attr('unique');
var z=a['value2']=$('#'+y).val();
})
console.log(a);
I know it doesnt work. Any ideas to solve it !
You need to declare a as an array outside your .each code, and then push each object into it. Try this:
var a = [];
$(".first").each(function() {
var x=$(this).val();
var y=$(this).attr('unique');
var z=$('#'+y).val();
a.push({value: x, unique: y, value2: z});
});
console.log(a);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="first" type="text" unique="001" value="2" />
<input class="second" id="001" type="text" value="2" />
<input class="first" type="text" unique="002" value="3" />
<input class="second" id="002" type="text" value="2" />
<input class="first" type="text" unique="003" value="4" />
<input class="second" id="003" type="text" value="3" />
Use .map() instead and in function create object with target structure.
var obj = $(".first").map(function(){
return {
'value': this.value,
'unique': $(this).attr('unique'),
'value2': $('#'+$(this).attr('unique')).val()
}
}).toArray();
console.log(obj);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="first" type="text" unique="001" value="2" />
<input class="second" id="001" type="text" value="2" />
<input class="first" type="text" unique="002" value="3" />
<input class="second" id="002" type="text" value="2" />
<input class="first" type="text" unique="003" value="4" />
<input class="second" id="003" type="text" value="3" />

Why are the checkboxes not being checked by jquery

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" />

Checkbox(javascript) selection, first item showing undefined?

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 = ''

JavaScript Calculate Button Doesn't Work

This script won't show the calculated total at the end. I can't figure it out! Any suggestions? What am I missing? I have the JavaScript code for the tax function too if that helps. Everything works until I get to the final calculation button.
<H2>Business Card Pricing Calculator</H2>
<P>
<STRONG>Type:</STRONG>
<BR /><BR />
<INPUT id="Horizontal" value="50" type="radio" name="type" />
<LABEL for="Horizontal">Horizontal</LABEL>
<BR />
<INPUT id="vertical" value="50" type="radio" name="type" />
<LABEL for="vertical">Vertical</LABEL>
<BR />
<INPUT id="foldover" value="65" type="radio" name="type" />
<LABEL for="foldover">Foldover</LABEL>
</P>
<P>
<STRONG>Options:</STRONG>
<BR /><BR />
<INPUT id="cutting" value="10" type="checkbox" name="cutting" />
<LABEL for="cutting">Cutting</LABEL>
<BR />
<INPUT id="laminating" value="15" type="checkbox" name="laminating" />
<LABEL for="laminating">Laminating</LABEL>
<BR />
<INPUT id="scoring" value="10" type="checkbox" name="scoring" />
<LABEL for="scoring">Scoring</LABEL>
</P>
<P>
<STRONG>Tax Rate:</STRONG>
<INPUT style="TEXT-ALIGN: right" id="tax_rate" maxLength="5" size="3" type="text"
name="tax_rate" />%
</P>
<P>
<STRONG>Total (Including Tax): </STRONG>
<SPAN id="total_cost"></SPAN>
</P>
<P>
<INPUT id="calculate-button" value="CALCULATE" type="button" />
</P>
JavaScript
$("#calculate-button").click(function () {
var price = 0;
var tax = 0;
var checkedValues = $('input:checked');
$(checkedValues).each(function (index) {
price += parseInt(checkedValues[index].value, 10);
});
tax = (price * $("#tax_rate").val() / 100);
$("#total_cost").html(price + tax);
});

jQuery radio subcategory uncheck on parent button change

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/

Categories