JQuery/Javascript select not visible element - javascript

I have a page with tabs, i would like select every span/input on each tabs, but not those in a hidden div.
There is a difference betwwen the hidden from tabs, and the hidden attribute ?.
For undertand this question, there is my code :
HTML
<input type="button" value="click me" id="btn">
<main>
<input id="tab1" class="tab" type="radio" name="tabs" checked>
<label for="tab1">Codepen</label>
<input id="tab2" class="tab" type="radio" name="tabs">
<label for="tab2">Dribbble</label>
<input id="tab3" class="tab" type="radio" name="tabs">
<label for="tab3">Dropbox</label>
<section id="content1">
<span id="span1">span1</span>
<input id="inp1" type="text" value="val" />
</section>
<section id="content2">
<span id="span2">span2</span>
<input id="inp2" type="text" value="val2" />
<div hidden>
<span id="span3">span3</span>
<input id="inp3" type="text" value="val3" />
</div>
</section>
<section id="content3">
<span id="span4">span4</span>
<input id="inp4" type="text" value="val4" />
<div>
<span id="span5">span5</span>
<input id="inp5" type="text" value="val5" />
</div>
<div hidden>
<div>
<span id="span6">span6</span>
<input id="inp6" type="text" value="val6" />
</div>
</div>
</section>
</main>
And my try in Jquery
$("#btn").click(function() {
$.each($("section").find("span, input"), function() {
if ($(this).is(":visible")) {
console.log($(this).attr("id"));
}
})
})
The output is :
span1
inp1
If i remove the if condition, output is :
span1
inp1
span2
inp2
span3
inp3
span4
inp4
span5
inp5
span6
inp6
And what i expect is :
span1
inp1
span2
inp2
span4
inp4
inp5
span5
And there is my JSFiddle for live demo
I don't know if this is clear, ask me in comment for more explication, and sorry for my english. Thanks

There are two solutions for this
$("#btn").click(function() {
console.log("Method 1");
$.each($("section").find("span, input"), function() {
if ($(this).closest("[hidden]").length == 0)
{
console.log($(this).attr("id"));
}
})
console.log("Method 2");
$.each($("section > span, section > input, section > div:not([hidden]) span, section > div:not([hidden]) input"), function() {
if ($(this).closest("[hidden]").length == 0)
{
console.log($(this).attr("id"));
}
})
})

hiding the element is not with hidden attribute but with CSS like this: <div style="display:none"> or <div style="visibility:hidden">

Related

jQuery - Assign the click function to the radio input

What I would like to do is assign both the checked value and the click function to the radio input located inside the parent div.
I currently have this code but it only works for assigning the checked value. The click () function does not work:
<div id="contPosition">
<div class="contPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
</div>
</div>
<div id="contPrintPosition">
<div class="contPrintPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
</div>
</div>
<script>
jQuery('.contPosition').click(function () {
var val = $(this).find('input:radio').prop('checked')?false:true;
$(this).find('input:radio').prop('checked', val);
});
//THIS FUNCTION DOES NOT WORK AS EXPECTED
jQuery('.contPosition input').click(function(){
var curCls = $(this).attr('class');
$(`.contPrintPosition > input.${curCls}`).val("Test");
});
//THIS FUNCTION DOES NOT WORK AS EXPECTED
jQuery('.contPosition input[type=radio]').click(function(){
if (this.previous) {
this.checked = false;
}
this.previous = this.checked;
});
</script>
I dont know what you want to achieve exactly but only one click event could replace all the other event as below snippet :
$(function() {
//should be ".contPosition input[type=radio]"
$('.contPosition input[type=radio]').click(function(e) {
var curCls = $(this).attr('class');
$(`.contPrintPosition > input.${curCls}`).val("Test");
if (this.previous) {
this.checked = false;
}
this.previous = this.checked;
});
})
.contPrintPosition input::after {
content: attr(value);
width:100%;
margin-left:15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contPosition">
<div class="contPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
<div id="contPrintPosition">
<div class="contPrintPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint3" />
</div>
</div>

Select several checkboxes in the same group

So I have a set of checkboxes, where I can only check one box per group, how do I change so I can check multiple boxes per group?
Codepen: http://codepen.io/anon/pen/dNwqzx
$(document).ready(function() {
$(".filterGenius input").each(function() {
if (window.location.href.indexOf($(this).val()) >= 0) {
$(this).attr("checked", "checked")
}
});
$(".filterGenius select option").each(function() {
if (window.location.href.indexOf($(this).val()) >= 0) {
$(this).attr('selected', true);
}
});
$(".filterGenius input").change(function() {
var s = encodeURI(unescape(jQuery.query.set("fss", getFSS())));
var o = window.location.href.split("?")[0];
$(".filterGenius input").attr("disabled", true);
window.location.href = o + s
});
});
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});
<div class="filterGenius">
<div class="col">
<b>Manufacturer</b>
<br>
<input type="checkbox" name="Manufacturer" value="HP" /> <span class "filtertext">HP</span>
<br>
<input type="checkbox" name="Manufacturer" value="Dell" /> <span class "filtertext">Dell</span>
<br>
<input type="checkbox" name="Manufacturer" value="Lenovo" /> <span class "filtertext">Lenovo</span>
<br>
<input type="checkbox" name="Manufacturer" value="Apple" /> <span class "filtertext"> Apple</span>
<br>
<input type="checkbox" name="Manufacturer" value="Acer" /> <span class "filtertext">Acer</span>
<br>
<input type="checkbox" name="Manufacturer" value="Asus" /> <span class "filtertext"> Asus</span>
<br>
</div>
<div class="col">
<b>OS</b>
<br>
<input type="checkbox" name="OS" value="W7H" /> <span class "filtertext">W7H</span>
<br>
<input type="checkbox" name="OS" value="Bing" /> <span class "filtertext">Bing</span>
<br>
<input type="checkbox" name="OS" value="W7P" /> <span class "filtertext">W7P</span>
<br>
<input type="checkbox" name="OS" value="W8P" /> <span class "filtertext">W8P</span>
<br>
<input type="checkbox" name="OS" value="W8.1P" /> <span class "filtertext">W8.1P</span>
<br>
<input type="checkbox" name="OS" value="Freedos" /> <span class "filtertext">Freedos</span>
<br>
<input type="checkbox" name="OS" value="CMAR" /><span class "filtertext"> CMAR</span>
<br>
<input type="checkbox" name="OS" value="COA" /><span class "filtertext"> COA</span>
<br>
</div>
</div>
The last jquery function prevents you from checking multiple boxes. From what I can tell that's all it does. Remove it and you should be able to check as many boxes as you like!
$(document).ready(function () {
$(".filterGenius input").each(function () {
if (window.location.href.indexOf($(this).val()) >= 0) {
$(this).attr("checked", "checked")
}
});
$(".filterGenius select option").each(function () {
if (window.location.href.indexOf($(this).val()) >= 0) {
$(this).attr('selected', true);
}
});
$(".filterGenius input").change(function () {
var s = encodeURI(unescape(jQuery.query.set("fss", getFSS())));
var o = window.location.href.split("?")[0];
$(".filterGenius input").attr("disabled", true);
window.location.href = o + s
});
});
//$('input[type="checkbox"]').on('change', function() {
//$('input[name="' + this.name + '"]').not(this).prop('checked', //false);
//});
<div class="filterGenius">
<div class="col">
<b>Manufacturer</b><br>
<input type="checkbox" name="Manufacturer_1" value="HP" /> <span class"filtertext">HP</span><br>
<input type="checkbox" name="Manufacturer_2" value="Dell" /> <span class"filtertext">Dell</span><br>
<input type="checkbox" name="Manufacturer_3" value="Lenovo" /> <span class"filtertext">Lenovo</span><br>
<input type="checkbox" name="Manufacturer_4" value="Apple" /> <span class"filtertext"> Apple</span><br>
<input type="checkbox" name="Manufacturer_5" value="Acer" /> <span class"filtertext">Acer</span><br>
<input type="checkbox" name="Manufacturer_6" value="Asus" /> <span class"filtertext"> Asus</span><br>
</div>
<div class="col">
<b>OS</b><br>
<input type="checkbox" name="OS_1" value="W7H" /> <span class"filtertext">W7H</span><br>
<input type="checkbox" name="OS_2" value="Bing" /> <span class"filtertext">Bing</span><br>
<input type="checkbox" name="OS_3" value="W7P" /> <span class"filtertext">W7P</span><br>
<input type="checkbox" name="OS_4" value="W8P" /> <span class"filtertext">W8P</span><br>
<input type="checkbox" name="OS_5" value="W8.1P" /> <span class"filtertext">W8.1P</span><br>
<input type="checkbox" name="OS_6" value="Freedos" /> <span class"filtertext">Freedos</span><br>
<input type="checkbox" name="OS_7" value="CMAR" /><span class"filtertext"> CMAR</span><br>
<input type="checkbox" name="OS_8" value="COA" /><span class"filtertext"> COA</span><br>
</div>
</div>
This should (hopefully) achieve what you are setting out to do - as #Yunus Saha pointed out
just comment or delete thise lines:
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});
I think you may need value of the each checked checkbox so better
Change the name attribute to be unique for each checkbox or use it as an array.
example of Manufacturer checkbox:
<input type="checkbox" name="Manufacturer[]" value="HP" />
do the same for other checkboxes too.
Remove this lines from the javascript codes (last three rows)
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});

Jquery, for loop shows all

$("#button").click(function () {
var pp = []
var ing = []
for (var q = 1; q <= 6; q++) {
pp[q - 1] = $('input[name=P' + (q) + ']').is(":checked");
ing[q - 1] = $('div#ingp' + (q) + '').show();
}
for (var q = 1; q <= 6; q++) {
if (pp[q - 1] == true) {
ing[q - 1];
}
}
});
<div class="Pizzas container" id="checkbox_pizza">
<h1>Kies uw Pizza.</h1>
<form id="Pi">
<input type="checkbox" name="P1" id="g"> €6,00 -Margherita (Kaas en tomaten)
<br/>
<input type="checkbox" name="P2" id="h"> €7,20 -Napolitana (tomaten, kaas, kappertjes, ansjovis)
<br/>
<input type="checkbox" name="P3" id="i"> €7,50 -Salami (kaas, tomaten en salami)
<br/>
<input type="checkbox" name="P4" id="j"> €7,50 -Prosciutto (tomaten, kaas, ham)
<br/>
<input type="checkbox" name="P5" id="k"> €7,00 -Funghi (tomaten, kaas, champions)
<br/>
<input type="checkbox" name="P6" id="l"> €8,00 -Tonno (tomaten, kaas, tonijn, ui)
<br/>
<input type="button" id="knop" value="button" />
</form>
</div>
<div class="container" id="Boxx">
<div id="ingrediënten">
<div>
<h1>Kies extra ingredienten</h1>
</div>
<div id="ingp1"></div>
<div id="ingp2"></div>
<div id="ingp3"></div>
<div id="ingp4"></div>
<div id="ingp5"></div>
<div id="ingp6"></div>
<input type="button" id="knop2" value="Totaal" />
</div>
</div>
So the problem I have is that when I look if one or more of P1 to P6 is check then it shows all 6 div with id ingp1 to ingp6.
I want it to show ingp1 when P1 is checked, and ingp3 when P3 is checked. You get it.
How do I do this (small thing I am only allowed to use javascript and jquery).
First of all add a common class names for the elements in the form and the div's in the container as I have given test1,test2 etc.
$('document').ready(function() {
var test
$("#Pi input[ type = 'checkbox']").click(function() {
var test = this.className
if ( this.checked == true )
{
$('#ingredienten .'+test).show()
console.log($('#ingrediënten .'+test))
}
else
{
$('#ingrediënten .'+test).hide()
}
})
})
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
</head>
<body>
<div class="Pizzas container" id="checkbox_pizza">
<h1>Kies uw Pizza.</h1>
<form id="Pi">
<input type="checkbox" class = "test1" name="P1" id="g"> €6,00 -Margherita (Kaas en tomaten)
<br/>
<input type="checkbox" class = "test2" name="P2" id="h"> €7,20 -Napolitana (tomaten, kaas, kappertjes, ansjovis)
<br/>
<input type="checkbox" class = "test3" name="P3" id="i"> €7,50 -Salami (kaas, tomaten en salami)
<br/>
<input type="checkbox" class = "test4" name="P4" id="j"> €7,50 -Prosciutto (tomaten, kaas, ham)
<br/>
<input type="checkbox" class = "test5" name="P5" id="k"> €7,00 -Funghi (tomaten, kaas, champions)
<br/>
<input type="checkbox" class = "test6" name="P6" id="l"> €8,00 -Tonno (tomaten, kaas, tonijn, ui)
<br/>
<input type="button" id="knop" value="button" />
</form>
</div>
<div class="container" id="Boxx">
<div id="ingredienten">
<div>
<h1>Kies extra ingredienten</h1></div>
<div id="ingp1" class = "test1">
</div>
<div id="ingp2" class = "test2">
</div>
<div id="ingp3" class = "test3">
</div>
<div id="ingp4" class = "test4">
</div>
<div id="ingp5" class = "test5">
</div>
<div id="ingp6" class = "test6">
</div>
<input type="button" id="knop2" value="Totaal" />
</div>
</div>
</body>
<html>
Then take the class name of the clicked check-box and search the div with the class name of this check-box and show or hide the div depending on its checked property.
try this
for (var q = 1; q <= 6; q++)
{
if ( $( 'input[ name = "P' + q + '"]').is(":checked") )
{
$( 'div#ingp' + q ).show();
}
}
$("#button").click(function () {
$('input[name^=P]').each(function () {
var idx = this.name.replace('P', '');
$('div#ingp' + idx).toggle(this.checked);
});
});
In words
for each <input> whose name starts with 'P',
find the associated <div> with the proper ID
toggle its visibility based on whether the <input> is checked or not
#Ttech thanks for clarifying the SO to me. Here's my solution. I slightly changed the markup in the part concerning the ids of the extra ingredients section (the divs).
Please, check my working example and see if this is what you need.
$('#ingrediënten div').hide();
$('#knop').on('click', function() {
$('#ingrediënten div').hide();
var $checkedOptions = $('#Pi input[type=checkbox]').filter(':checked'),
$extraIngredients = $('#ingrediënten div');
$checkedOptions.each(function() {
var id = $(this).attr('name');
$extraIngredients.filter('[id=' + id + ']').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="Pizzas container" id="checkbox_pizza">
<h1>Kies uw Pizza.</h1>
<form id="Pi">
<input type="checkbox" name="P1" id="g"> €6,00 -Margherita (Kaas en tomaten)
<br/>
<input type="checkbox" name="P2" id="h"> €7,20 -Napolitana (tomaten, kaas, kappertjes, ansjovis)
<br/>
<input type="checkbox" name="P3" id="i"> €7,50 -Salami (kaas, tomaten en salami)
<br/>
<input type="checkbox" name="P4" id="j"> €7,50 -Prosciutto (tomaten, kaas, ham)
<br/>
<input type="checkbox" name="P5" id="k"> €7,00 -Funghi (tomaten, kaas, champions)
<br/>
<input type="checkbox" name="P6" id="l"> €8,00 -Tonno (tomaten, kaas, tonijn, ui)
<br/>
<input type="button" id="knop" value="button" />
</form>
</div>
<div class="container" id="Boxx">
<div id="ingrediënten">
<div>
<h1>Kies extra ingredienten</h1>
</div>
<div id="P1">
Extra ingredient 1
</div>
<div id="P2">
Extra ingredient 2
</div>
<div id="P3">
Extra ingredient 3
</div>
<div id="P4">
Extra ingredient 4
</div>
<div id="P5">
Extra ingredient 5
</div>
<div id="P6">
Extra ingredient 6
</div>
<br>
<input type="button" id="knop2" value="Totaal" />
</div>
</div>

how to get the id of html element in javascript or jquery?

<div class="class1" co="51">
<div class="class2">
<label class="class3">
<input class="4" dataid="8d2" name="dd" type="radio" />
<span class="quiz-option-text">ff</span>
</label>
</div>
</div>
i have some thing like this , I want id of the INPUT in javascript or jquery how can i do it?
Using javascript:
var radioInput = document.getElementsByName("dd")[0];
var radioInpId = radioInput.id; //will give you id
First your input should have an id attribute
Like this
<Input id="ggg" type="text">
Then you get it as the following in plain javascript:
var myInput =document.getElementById("ggg");
Or using jQuery:
var myInput= $("#ggg");
If you want to get all dataid in document you have to go through all the elementals in the document. see Demo
Example HTML
<div class="class1" co="51">
<div class="class2">
<label class="class3">
<input class="4" dataid="8d2" name="dd" type="radio" />
<span class="quiz-option-text">ff</span><br>
<input dataid="8d3" name="dd" type="text" /> <br>
<input class="4" dataid="8d4" name="dd" type="text" /> <br>
<textarea dataid="8d5">fdfd</textarea> <br>
</label>
</div>
</div>
Jquery
<script type="text/javascript">
$(document).ready(function(){
var id_arr=new Array();
var i=0;
$('textarea,input').each(function(){
var id=$(this).attr("dataid");
alert(id);
id_arr[i]=$(this).attr("dataid");
i++;
});
alert(id_arr);
});
</script>

Displaying div on Radio Button click only

I have an Html code as such
<li>
<ul>
<li id="6"><input type="radio" name="sell" value="sell" id="sell" />Sell</li>
<li id="7"><input type="radio" name="rent" value="rent" id="rent" />Rent</li>
<li id="8"><input type="radio" name="donate" value="donate" id="donate" />Donate</li>
</ul>
<div id="selltab" style="display:none;">
eeeeeeeee
</div>
<div id="renttab" style="display:none;">
ffffffffff
</div>
<div id="donatetab" style="display:none;">
ggggggggg
</div>
</li>
I need to show each div only while clicking the corresponding radio button, else it should be hidden. Right now I have written a JavaScript, but its not working properly:
$(document).ready(function(){
$("radio[#name='sell']").click(function(){
if ($("radio[#name='sell']:checked").val() == 'sell')
$("#selltab").css("display","block");
});
});
This was written to test whether selltab can be shown when clicking radio button of value sell, but seems to have some mistake somewhere.
By using toggle function you can do it.
$('#selltab').hide();
$('#renttab').hide();
$('input[name=sell]').click(function(){
$('#selltab').toggle();
})
$('input[name=rent]').click(function(){
$('#renttab').toggle();
})
I think this is what you want : http://jsfiddle.net/Wsg3q/
<form>
<input type="radio" name="group" value="sell" id="sell" /> sell <br/>
<input type="radio" name="group" value="rent" id="rent" /> rent <br/>
<input type="radio" name="group" value="donate" id="donate" /> donate <br/>
</form>
<div id="selltab" >
eeeeeeeee
</div>
<div id="renttab" >
ffffffffff
</div>
<div id="donatetab" >
ggggggggg
</div>
Javascript :
$('div').hide();
$("input[name=group]:radio").change(function() {
$( '#' + $(this).attr('id') + 'tab' ).show();
$('div:not(#' + $(this).attr('id') + 'tab)' ).hide();
});
​
​

Categories