Develop Reference

Show only Checked Options using Jquery

How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.
$("#checked_show").click(function() {
$("input").hide();
$("label").hide();
$("input:checked").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>
How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.

You can use input:checked combined with :not() to select the inputs that aren't checked.
$("#checked_show").click(function() {
$("input:not(:checked)").each((i, el) => {
$(el).next().hide();
$(el).hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>

You should use :checked to select the checked input and negate that with :not(), also to hide the labels you have to loop through all elements and select the next element using .next(), here is a working snippet:
$("#checked_show").click(function () {
if ($("input[type='checkbox']:checked").length) {
$("input[type='checkbox']:not(:checked)").each(function (idx, el) {
$(el).next().hide();
$(el).hide();
});
} else {
console.log('Please select an input!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>

How to Checked a checkbox when there is a certain value in the text field

I have a textfield which contains certain value:
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
this is the input checkbox
<input type="checkbox" name="user_id[] value="61" />
<input type="checkbox" name="user_id[] value="62" />
<input type="checkbox" name="user_id[] value="63" />
*note i run this checkbox in php thats why it contains the [] for array.
I want the checkbox to checked if there is a value of 61 inside the textfield. I want it to be dynamic because it is from database, because value can be change and it is not fixed. How do i do this?
thanks in advance

You can try something like this
let ids = $('#studID').val().split(',');
ids.forEach(function(id) {
$('input[type="checkbox"][value="'+id+'"]').prop('checked',true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />
<input type="checkbox" name="user_id[]" value="66" />
<input type="checkbox" name="user_id[]" value="67" />
<input type="checkbox" name="user_id[]" value="68" />
let ids = $('#studID').val().split(',');
ids.forEach(function(id) {
$('input[type="checkbox"][value="'+id+'"]').prop('checked',true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />
<input type="checkbox" name="user_id[]" value="66" />
<input type="checkbox" name="user_id[]" value="67" />
<input type="checkbox" name="user_id[]" value="68" />
plain javascript
let ids = document.querySelector("#studID").value.split(',');
ids.forEach(function(id) {
var checkbox = document.querySelector("input[name='user_id[]'][value='"+id+"']");
if(checkbox) {
checkbox.checked = true;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />
<input type="checkbox" name="user_id[]" value="66" />
<input type="checkbox" name="user_id[]" value="67" />
<input type="checkbox" name="user_id[]" value="68" />

You have to iterate over the inputs and then check the condition:
document.querySelectorAll("input").forEach(function(i) {
if (i.value.indexOf("61") > -1) {
i.checked = true;
}
});
<input type="checkbox" name="user_id[]" value=" 61 " />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value=" 63" />

Add a change listener to the text field. It should loop through the checkboxes, either checking or unchecking them depending on whether their values match the input.
document.querySelector("#studID").addEventListener("change", function() {
var values = this.value.split(",");
var checkboxes = document.querySelectorAll(`input[name='user_id[]']`);
checkboxes.forEach(cb => cb.checked = values.includes(cb.value));
});
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64" />
<br>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />

How to Only Check All Other Checkboxes From another Checkbox in a Group Chechbox

I need to only enable checking (Not Unchecking) all other chechboxes in a group checkbox from one of them like
<input type="checkbox" name="product" value="all" />All Genders <br />
<input type="checkbox" name="product" value="women" />Women <br />
<input type="checkbox" name="product" value="men" />Men<br />
<input type="checkbox" name="product" value="bi" />Bi<br />
what I need to do is checking all women, men and bi checkboxes when user clicks all but uncheck it only by code when user clicks on one of the other options?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="product" value="all" />All Genders <br />
<input type="checkbox" name="product" value="women" />Women <br />
<input type="checkbox" name="product" value="men" />Men<br />
<input type="checkbox" name="product" value="bi" />Bi<br />

$(document).on("click", "input", function (evt) {
if($(this).hasClass('selall')) {
$('input').prop('checked', true);
}
else
{
$('.selall').prop('checked', false);
}
if ($('.gender:checked').length == $('.gender').length) {
$('input').prop('checked', true);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="product" value="all" class="selall" />All Genders <br />
<input type="checkbox" name="product" value="women" class="gender" />Women <br />
<input type="checkbox" name="product" value="men" class="gender" />Men<br />
<input type="checkbox" name="product" value="bi" class="gender" />Bi<br />

add an event listener for the first checkBox and when it changes, if it's checked then check all the checkboxes :
const inputs = document.querySelectorAll('input[type="checkbox"]');
document.querySelector('input[type="checkbox"]').addEventListener('change', function(e) {
if (this.checked)
inputs.forEach(function(elem) {
elem.checked = true;
});
});
inputs.forEach(function(elem) {
elem.addEventListener('change', function(e) {
if (!this.checked)
document.querySelector('input[type="checkbox"]').checked = false;
});
});
<input type="checkbox" name="product" value="all" />All Genders <br />
<input type="checkbox" name="product" value="women" />Women <br />
<input type="checkbox" name="product" value="men" />Men<br />
<input type="checkbox" name="product" value="bi" />Bi<br />

Proper JavaScript to show/hide inputs

I just want to know the proper function loop code for show/hide method.
This is the javascript for show/hide for the first (1) radio button:
function showHide(){
var chckbox = document.getElementById("chk");
var hiddeninputs = document.getElementsByClassName("hidden");
for(var i=0; i !=hiddeninputs.length; i++){
if(chckbox.checked){
hiddeninputs[i].style.display ="block";
}
else{
hiddeninputs[i].style.display ="none";
}
}
}
Yet I need the proper loop for having multiple objects (checkboxes) with seperated show/hide method. This is the first checkbox code:
<input type="checkbox" name="area" id="chk" onclick="showHide(this.checked);"/>
<label for="chk">Billing & Credit Management Systems</label>
<div class="hidden">
<input type="radio" name="area1" /> <label> Web Billin g </label> <br />
<input type="radio" name="area1" /> <label> CRIBS </label> <br />
<input type="radio" name="area1" /> <label> PPC </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label> <br />
</div>
And I need the loop code in order to prompt the show/hide to the following objects:
<input type="checkbox" name="area" id="chk1" onclick="showHide(this.checked);"/>
<label for="chk1">Customer Care Systems</label>
<div class="hidden">
<input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br />
<input type="radio" name="area1" /> <label> MVNO CRM </label> <br />
<input type="radio" name="area1" /> <label> Self-Care Site </label> <br />
<input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label> <br />
<input type="radio" name="area1" /> <label> IRS </label> <br />
<input type="radio" name="area1" /> <label> Online Guide </label> <br />
<input type="radio" name="area1" /> <label> TMOS </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label> <br />
</div>
Only the first checkbox prompts while the second one doesn't whenever I checked.

Not the exact answer you're looking for, but a bit simpler (less looping). Let me know if this works for you, I'll try my best to explain what's happening here.
I implemented this solution with the intention of forcing you to change as little as possible.
1) Assign a unique attribute to the checkbox and the div it belongs to. In this case I used "data-menu". In the onclick function, pass "this" instance of the element into the function showHide.
<input data-menu="1" type="checkbox" name="area" id="chk" onclick="showHide(this);"/>
<div class="hidden" data-menu="1">
2) Use the css class 'hidden' to hide your menu options.
.hidden {
display: none;
}
3) Re-work your JS function to dynamically add the hidden class when the box is checked. Since your menus are off by default, checking on naturally turns them on.
function showHide(e){
var menu = document.querySelector('div[data-menu="'+e.getAttribute('data-menu')+'"');
menu.classList.toggle('hidden');
}
Check out the below working snippet to see it in action.
function showHide(e){
var menu = document.querySelector('div[data-menu="'+e.getAttribute('data-menu')+'"');
menu.classList.toggle('hidden');
}
.hidden {
display: none;
}
<input data-menu="1" type="checkbox" name="area" id="chk" onclick="showHide(this);"/>
<label for="chk">Billing & Credit Management Systems</label>
<div class="hidden" data-menu="1">
<input type="radio" name="area1" /> <label> Web Billin g </label> <br />
<input type="radio" name="area1" /> <label> CRIBS </label> <br />
<input type="radio" name="area1" /> <label> PPC </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label> <br />
</div>
<input data-menu="2" type="checkbox" name="area" id="chk1" onclick="showHide(this);"/>
<label for="chk1">Customer Care Systems</label>
<div data-menu="2" class="hidden">
<input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br />
<input type="radio" name="area1" /> <label> MVNO CRM </label> <br />
<input type="radio" name="area1" /> <label> Self-Care Site </label> <br />
<input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label> <br />
<input type="radio" name="area1" /> <label> IRS </label> <br />
<input type="radio" name="area1" /> <label> Online Guide </label> <br />
<input type="radio" name="area1" /> <label> TMOS </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label> <br />
</div>

function showHide(element){
var chckbox = document.getElementById(element);
var hiddeninputs = document.getElementsByClassName(element);
for(var i=0; i !=hiddeninputs.length; i++){
if(chckbox.checked){
hiddeninputs[i].style.display ="block";
}
else{
hiddeninputs[i].style.display ="none";
}
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="checkbox" name="area" id="chk" onclick="showHide(this.id);"/>
<label for="chk">Billing & Credit Management Systems</label>
<div class="chk">
<input type="radio" name="area1" /> <label> Web Billin g </label> <br />
<input type="radio" name="area1" /> <label> CRIBS </label> <br />
<input type="radio" name="area1" /> <label> PPC </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label> <br />
</div> <br>
<input type="checkbox" name="area" id="chk1" onclick="showHide(this.id);"/>
<label for="chk1">Customer Care Systems</label>
<div class="chk1">
<input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br />
<input type="radio" name="area1" /> <label> MVNO CRM </label> <br />
<input type="radio" name="area1" /> <label> Self-Care Site </label> <br />
<input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label> <br />
<input type="radio" name="area1" /> <label> IRS </label> <br />
<input type="radio" name="area1" /> <label> Online Guide </label> <br />
<input type="radio" name="area1" /> <label> TMOS </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label> <br />
</div>
</body>
</html>
try this this will work fine for you.

You're not using the parameter you're providing in the call of your function.
var chckbox = document.getElementById("chk");
will always find the first checkbox only to know if the other fields should be hidden or not and
var hiddeninputs = document.getElementsByClassName("hidden");
will allways hide all elements with class hidden. I think that
<input type="checkbox" name="area" id="chk" onclick="showHide(this);"/>
(i.e. change the parameter to the element rather than the .checked) in combination with
function showHide(elem){
var selector = "#" + elem.id + " ~ .hidden";
document.querySelector(selector).style.display = elem.checked ? 'block' : 'none';
}
will do more of what you want

call onchange function in input type checkbox
example
<input type="checkbox" name="area" id="chk" onchange="valueChanged(this.id)"/>Billing & Credit Management Systems
<input type="checkbox" name="area" id="chk1" onchange="valueChanged(this.id)"/> Customer Care Systems
<script type="text/javascript">
$(document).ready( function(){
$(".hidden").hide();
$(".hidden2").hide();
});
function valueChanged(id){
if(id== "chk"){
if($('#chk').is(":checked"))
$(".hidden").show();
else
$(".hidden").hide();
}
if(id== "chk1"){
if($('#chk1').is(":checked"))
$(".hidden2").show();
else
$(".hidden2").hide();
}
}
</script>
<div class="hidden">
<input type="radio" name="area1" /> <label> Web Billin g </label> <br />
<input type="radio" name="area1" /> <label> CRIBS </label> <br />
<input type="radio" name="area1" /> <label> PPC </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label> <br />
</div>
<div class="hidden2">
<input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br />
<input type="radio" name="area1" /> <label> MVNO CRM </label> <br />
<input type="radio" name="area1" /> <label> Self-Care Site </label> <br />
<input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label> <br />
<input type="radio" name="area1" /> <label> IRS </label> <br />
<input type="radio" name="area1" /> <label> Online Guide </label> <br />
<input type="radio" name="area1" /> <label> TMOS </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label> <br />
</div>

Checkbox value showing using JavaScript

I want to show my checkbox value when I check it, but my code show only one value.
For example if I check 1st checkbox it show it's value at that time. If I check 2nd checkbox then it's value will display beside previous value.
What should I do?
<script>
function test(item) {
var result = $('#val').val();
$('#course').html(result);
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test()" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test()" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test()" />40
<br />
</html>

Please note -
You should have to use unique id
my suggestion is use class instead
Please refer this, i hope will be useful to you
$(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 />

$('input[data-action="data-click"]').on("click", function() {
if($(this). prop("checked")==true){
var dataDisplay = "<span id='" + this.value + "'>" + this.value + "</span>";
$('div#show').append(dataDisplay + " ")
}
else {
$("#" + this.value).remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
</div>
<input type="checkbox" value="20" data-action="data-click" />20
<br />
<input type="checkbox" value="30" data-action="data-click" />30
<br />
<input type="checkbox" value="40" data-action="data-click" />40
<br />

You have given same id to every checkbox so javascript finds only the first checkbox and shows its value.
You can send the clicked checkbox to the function and get its value
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val2" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val3" value="40" onclick="test(this)" />40
<script>
function test(item) {
var result = $(item).val();
$('#course').html(result);
}
</script>

function test(element) {
var result = $(element).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" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />
Change $('#course').html(result); to $('#course').append(result);
Use this context and to get current checkbox

First of all, id attribute should be unique you need to always use class attribute for a group of elements.
For referring the clicked element pass this as click handler argument.
<script>
function test(item) {
document.getElementById('course').innerHTML = item.value;
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" value="40" onclick="test(this)" />40
<br />
</html>

Use class instead of id and bind the click event for class
$('.val').click(function() {
$("#course").html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="val" value="20" />20
<br />
<input type="checkbox" class="val" value="30" />30
<br />
<input type="checkbox" class="val" value="40" />40
<br />
</html>

Try this one. Pass the item to the function and display the value of item. I have attached the sample code snippet.
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
function test(item) {
var result = item.value;
$('#course').html(result);
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />
</html>

In the first Place you should never use same ID "val" to all the Check boxes you have Classes for that.
This is just a modification to previously entered code, to let you know that you don't have to pass the whole this Object to your function rather you can directly pass the value like this.value
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
function test(item) {
var result = item;
$('#course').html($('#course').html());
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" value="20" onclick="test(this.value)" />20
<br />
<input type="checkbox" value="30" onclick="test(this.value)" />30
<br />
<input type="checkbox" value="40" onclick="test(this.value)" />40
<br />
</html>
Hope that this helped you.