How to get a label value into a div - javascript

This is my html code:
<div id="box">
<div>
<label for="text">Text 1</label>
</div>
<div>
<label for="text">Text 2</label>
</div>
<div>
<label for="text">Text 3</label>
</div>
</div>
I need to get all label in a div with id="box" so I use Jquery:
var container=$('div[id="box"]');
container.find('label[for="text"]').each(function(index){
console.log("INDEX "+index);
});
The problem is that the jquery function print only one time "INDEX" 0. Anyone can help to print all label value?


Here you can see working Fiddle. Hope this will solve your problem
function show(){
$("#box").find("label").each(function(){
alert($(this).html());
});}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html>
<body>
<div id="box">
<div>
<label for="text">Text 1</label>
</div>
<div>
<label for="text">Text 2</label>
</div>
<div>
<label for="text">Text 3</label>
</div>
</div>
<input type="button" value="Show" onclick="return show();">
</body>
</html>


Anyone can help to print all label value?
try
$('#box').find('label[for="text"]').each(function(){
console.log($(this).html());
});


You can select all labels directly.
$("#box label").each(function(index){
console.log("INDEX "+index);
});
Fiddle here.

Related

Hide rows missing a certain class with jQuery

I have a series of dynamic divs like these
<div id="my_unique_div">
<div>
<input type='checkbox'></input><label>Label 1</label><label><span class="unique">Text 1</span></label>
</div>
<div>
<input type='checkbox'></input><label>Label 2</label>
</div>
<div>
<input type='checkbox'></input><label>Label 3</label><label><span class="unique">Text 3</span></label>
</div>
<div>
<input type='checkbox'></input><label>Label 4</label><label><span class="unique">Text 4</span></label>
</div>
</div>
I would like to set the display of all the divs that do not contain a span with class="unique" to "none" with jQuery but not sure what selector to use to grab them.
That would leave only the 2nd div above visible and hide the 1st, 3rd and 4th.

My answer loops all of the divs under #my_unique_div and looks for .unique objects and if none, add a class that sets the display to none.
$("#my_unique_div div").each(function() {
if ($(this).find(".unique").length === 0) {
$(this).addClass("hide");
}
});
.hide {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my_unique_div">
<div>
<input type='checkbox'></input><label>Label 1</label><label><span class="unique">Text 1</span></label>
</div>
<div>
<input type='checkbox'></input><label>Label 2</label>
</div>
<div>
<input type='checkbox'></input><label>Label 3</label><label><span class="unique">Text 3</span></label>
</div>
<div>
<input type='checkbox'></input><label>Label 4</label><label><span class="unique">Text 4</span></label>
</div>
</div>

Select only one checkbox HTML

I have a problem with checking only one checkbox... I tried two types of JS code.. But it doesn't work... To check by class, when u click on one element with class 'product-list' to deselect another... Have someone idea how to solve this?
HTML:
<div class="mg-toolbar">
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" type="checkbox" name="PDF" value="<?php echo $file_name; ?>">
<label for="file_1">SELECT</label>
</div>
</div>
JS Try 1:
<script type="text/javascript">
$('.product-list').click(function() {
$(this).siblings('input:checkbox').prop('checked', false);
);
</script>
JS Try 2:
<script type="text/javascript">
$('.product-list').on('change', function() {
$('.product-list').not(this).prop('checked', false);
});
</script>

If you want to ensure that only one item to be selected at once, then actually that's what radio buttons were invented for (rather than checkboxes). And you don't need any JS code to make that work.
Demo:
<div class="mg-toolbar">
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_1" type="radio" name="PDF" value="File1">
<label for="file_1">SELECT 1</label>
</div>
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_2" type="radio" name="PDF" value="File2">
<label for="file_2">SELECT 2</label>
</div>
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_3" type="radio" name="PDF" value="File3">
<label for="file_3">SELECT 3</label>
</div>
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_4" type="radio" name="PDF" value="File4">
<label for="file_4">SELECT 4</label>
</div>
</div>

change the #c01 and #c02 to the two check box ID's your doing this with.
I think this may do what you need it to do. If c01 checked, c02 is unchecked, and vice-versa
$("#c01").click(function(){
if($("#c01").is(':checked'))
$("#c02").prop("checked", false);
});
$("#c02").click(function(){
if($("#c02").is(':checked'))
$("#c01").prop("checked", false);
});

Showing and hiding divs with class

I have written the below script that shows and hides divs when a checkbox is clicked. It gets the checkbox value and then hides the div with that class. My problem is a div may be tagged with two checkbox values. If one of them is still ticked I'd still like the div to be shown rather than hidden as my script currently does. What is the way around that?
HTML
<fieldset class="simple-filter">
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
<label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
<label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="quad" value="quad" checked>
<label for="quad">Quad/Inline</label>
</div>
</fieldset>
<div class="simple-filter-items">
<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>
Script:
jQuery(document).ready(function($){
$( ".filter-click" ).change(function() {
checkboxval = $(this).val();
$(".simple-filter-items").find("." + checkboxval).toggle();
});
});
Fiddle is here https://jsfiddle.net/h5as3cwb/

You can use each loop to iterate through checked checkboxes and show divs where checkbox is checked
Demo Code :
jQuery(document).ready(function($) {
$(".filter-click").change(function() {
//hide all div
$(".simple-filter-items div").hide()
//loop throgh checked checkboxes
$(".simple-filter input[type=checkbox]:checked").each(function() {
//show them
$(".simple-filter-items").find("." + $(this).val()).show();
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="simple-filter">
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
<label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
<label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="quad" value="quad" checked>
<label for="quad">Quad/Inline</label>
</div>
</fieldset>
<div class="simple-filter-items">
<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>

This solution is very similar to #Swati's but uses the .filter() and .map() methods:
$( ".filter-click" ).change(function() {
const checked = $('.filter-click:checked').map((i,c) => c.value).get();
$('.simple-filter-items > div').hide()
.filter(checked.map(c => `.${c}`).join(',')).show();
});
jQuery(document).ready(function($){
$( ".filter-click" ).change(function() {
const checked = $('.filter-click:checked').map((i,c) => c.value).get();
$('.simple-filter-items > div').hide()
.filter(checked.map(c => `.${c}`).join(',')).show();
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="simple-filter">
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
<label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
<label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="quad" value="quad" checked>
<label for="quad">Quad/Inline</label>
</div>
</fieldset>
<div class="simple-filter-items">
<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>

How to use selector to get value under DOM using Jquery

I have a html container structure like as
<div class='APart'>
<div class='Main'>
<input name='MainInput' value='1'>
</div>
<div class='Sub'>
<input name='SubInput' value='2'>
<input name='SubInput' value='5'>
</div>
</div>
<div class='APart'>
<div class='Main'>
<input name='MainInput' value='3'>
</div>
<div class='Sub'>
<input name='SubInput' value='4'>
<input name='SubInput' value='6'>
</div>
</div>
and I using Jquery to do foreach and get data
$('.APart input[name=MainInput]').each(function(index, element) {
console.log(this.value)
});
now I know how to get MainInput value,next step how to get SubInput value?
this is my expectation result
array[0] = "1,2,5"
array[1] = "3,4,6"

Add a new class tag on your input dom
<div class='APart'>
<div class='Main'>
<input class=''MainClass' name='MainInput' value='1'>
</div>
<div class='Sub'>
<input class=''SubClass' name='SubInput' value='2'>
<input class=''SubClass' name='SubInput' value='5'>
</div>
</div>
<div class='APart'>
<div class='Main'>
<input class=''MainClass' name='MainInput' value='3'>
</div>
<div class='Sub'>
<input class=''SubClass' name='SubInput' value='4'>
<input class=''SubClass' name='SubInput' value='6'>
</div>
</div>
so next step we can selector class like as
$('.APart').each(function(index, element) {
$(this).children('.Main').find('.MainClass').each(function (i,e){
console.log($(e).val())
});
$(this).children('.Sub').find('.SubClass').each(function (i,e){
console.log($(e).val())
});
});
This code to do things
get every APart Class
get APart DOM Data after to find next children class
then we find it after just need use selector to find new class group

I think you meant MainInput? You can select inputs via there name attribute, then get their value using the following:
$('.APart input[name=MainInput]').each(function(index, element) {
console.log($(element).val());
});
Have a look at this CSS Selectors cheat sheet for more.

first give a class name for what your are accessing input
<div class='APart'>
<div class='Main'>
<input name='MainInput' value='1' class="getMain">
</div>
<div class='Sub'>
<input name='SubInput' value='2'>
</div>
<div class='Main'>
<input name='MainInput' value='3' class="getMain">
</div>
<div class='Sub'>
<input name='SubInput' value='4'>
</div>
</div>
after you can access with Jquery
$(':input.getMain').each(function(index, element){
var name = element.name;
});
reference
//this will give all your vaues

U can use the each function for looping
$('.APart input[name="MainInput"]').each(function(){
console.log($(this).val());
});

How to edit the text of label

I am new to JavaScript.Could anybody suggest me how to change the text of label in below code
<div class="col-sm-6">
<div class="radio">
<label for="radioabc">
<input id="radioabc" type="radio" value="def" name="input_Radio">
abc
</label>
</div>
<div class="radio">
<label for="radioxyz">
<input id="radioxyz" type="radio" value="pqr" name="input_Radio">
xyz
</label>
</div>
</div>
I want to change text 'abc' and text 'xyz' to other values.
My approch to change text 'abc' to 'tvr'.
I've tried:
$($(".col-sm-6").children()[0]).children().text("tvr");
then it also removes input field.whats wrong in my approach or please suggest some other approach.

if you want to change text by Javascript:
var divs = document.getElementsByClassName('radio');//got all nodes in divs
divs[0].children[0].lastChild.data = "tvr"; // similar for second text...using divs[1]
JSFIDDLE DEMO

You can use jQuery and do it easily:
Example
html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-6">
<div class="radio">
<label for="radioabc">abc</label>
<input id="radioabc" type="radio" value="def" name="input_Radio" />
</div>
<div class="radio">
<label for="radioxyz">
xyz
</label>
<input id="radioxyz" type="radio" value="pqr" name="input_Radio" />
</div>
</div>
javascript:
<script>
$(function() {
$('label').on('click', function(){
$(this).text('something else');
})
});
</script>

Categories