I have a set of elements that have been generated dynamically through Handlebars as seen below
{{#floor as |room i|}}
<div class="btn-group-toggle" data-toggle="buttons" >
<label class="btn btn-secondary" id="{{id}}">
<input type="checkbox" autocomplete="off"> {{name}}
</label>
</div>
{{/floor}}
As you can see, the elements are created with id="{{id}}". But when the page finishes loading, I want to hide these elements until a user clicks a button. I'm finding it hard to get the dynamic ids
Currently, I'm using JQuery as seen below
$(document).ready(function () {
$('#{{id}}').hide();
});
this works with known ids, but not in this case where I don't know the id
If you are trying to hide the element you can also select a unique class.
{#floor as |room i|}}
<div class="btn-group-toggle" data-toggle="buttons" >
<label class="btn btn-secondary unique-class" id="{{id}}">
<input type="checkbox" autocomplete="off"> {{name}}
</label>
</div>
{{/floor}}
Using JQuery:
$(document).ready(function () {
$('.unique-class').hide();
});
Related
I have some checkboxes generating through a foreach loop. All I want, by checking one checkbox another checkbox will be checked. I have already tried something like this,
This is the foreach block where the checkboxes are generating.
#foreach($testItems->where('category_id', $category->id) as $item)
<div class="col-md-12">
<div class='form-check'>
<div class="custom-control custom-checkbox">
<input type="checkbox"class="select-test form-check-input form-check-secondary" id="selectTest" name="test_name" value="{{$item->test_name}}">
</div>
<input type="checkbox" class="price" id="testPrice" name="test_price" value="{{$item->price}}" >
<span>{{ucwords($item->test_name)}} ( {{$item->price}} )</span>
</div>
</div>
#endforeach
This is the script I tried
var chk1 = $("#selectTest");
var chk2 = $("#testPrice");
chk1.on('change', function(){
chk2.prop('checked',this.checked);
});
in this case, the first checkbox only works fine, but rest of them are not working.
It only works for the first checkbox only because id= attributes only match the first matching node in the DOM. Use a class (.selectTest) instead.
You may need to get rid of id="testPrice" as well or make it a class instead.
#foreach($testItems->where('category_id', $category->id) as $item)
<div class="col-md-12">
<div class='form-check'>
<div class="custom-control custom-checkbox">
<input type="checkbox"class="select-test form-check-input form-check-secondary selectTest" name="test_name" value="{{$item->test_name}}">
</div>
<input type="checkbox" class="price" name="test_price" value="{{$item->price}}" >
<span>{{ucwords($item->test_name)}} ( {{$item->price}} )</span>
</div>
</div>
#endforeach
The jquery script.
var chk1 = $(".selectTest");
chk1.on('change', function(){
$(this).closest("div").next().prop('checked', $(this).is(":checked"));
});
id attribute
The id global attribute defines an identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element
when linking (using a fragment identifier), scripting, or styling
(with CSS).
I created a for using handlebars to get the values from my bank, the search is coming correctly but when trying to select one of the city options it returns me undefined
I believe it is something in this style, but could not apply in my code
Handlebars & Jquery: Dynamically generated ids
$(document).on("click", "[data-trigger='save']", function (evt) {var commentID = $(this).prev().data("comment");});
{{#each cidade}}
<div class="card mt-4">
<label for="bott"><button class="btn" name="cid" id="cid" data-trigger="save">
<div class="card-body">
<small>{{estado}} - {{ativo}} </small>
<input type="hidden" data-comment ="{{#index}}" name="idcid" id="idcid" value="{{_id}}">
</div>
</button>
</label>
</div>
{{else}}
<h4 value="0">Nenhuma cidade registrada</h4>
{{/each}}
<input type="text" id="cidade" name="cidade" class="form-control" disabled>
The question is to take the id value and the name of the selected button and put the related name in the input text
If you need to add information let me know because I'm new here and I'm using google translator for this conversation
thanks in advance
I have the following form :
<form class="form-inline" role="form">
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox">
<label>
<input type="checkbox" name="discounting" onchange='handleChange(this);' id='check11' > Show only price-discounted products
</label>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox" id='check21'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
</div>
</div>
</form>
I'd like to be able to check the second checkbox automatically with JavaScript once I check the first one. I tried using the following script :
<script>
function handleChange(cb) {
if(cb.checked == true) {
alert('Message 1');
document.getElementById("check21").checked = true;
} else {
alert('Message 2');
var x = document.getElementById("check21").disabled= false;
}
}
</script>
But it doesn't work since I think with bootstrap is a question of classes.
The problem as Didier pointed out is that you have two elements with the same ID:
<div class="checkbox" id='check21'>
and
<input type="checkbox" name="discounting" onchange='' id='check21'>
The call to document.getElementById('check21') will probably (because the behavior is undefined) return the first one, which in this case is the <div> element, not the checkbox.
You must not use the same ID on two HTML elements, so you need to change the ID on one or the other of them.
http://jsfiddle.net/uywaxds5/2/
I included boostrap as an external reference.
<div class="checkbox" id='check22'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
Fixing the duplicate id seems to work.
If it does not works, the issue might be in another part of your code.
Use a different name for the second radio button
<input type="checkbox" name="discounting21">
There can only be one selected radio button belonging to the same group(ie. name).
I have a button group and am willing to update some other field on change according to the active buttons.
See the jsfiddle here
This is the HTML, copied from the documentation:
<div class="btn-group arrActiviteit arrUpdate" data-toggle="buttons">
<label class="btn btn-primary active" data-wat='foo'>
<input type="checkbox"> Item 1
</label>
<label class="btn btn-primary" data-wat='bar'>
<input type="checkbox"> Item 2
</label>
<label class="btn btn-primary" data-wat='something'>
<input type="checkbox"> item 3
</label>
<label class="btn btn-primary" data-wat='orElse'>
<input type="checkbox"> item 4
</label>
</div>
The Button row acts like it should do.
Then I watch for a click event on the .arrUpdate div for change. I've got multiple button groups which all have the .arrUpdate class. That's the reason for the second class: .arrActiviteit
$('.arrUpdate').click(function(e){
val = ''; // for holding the temporary values
$('.arrActiviteit label').each(function(key, value){
if(value.className.indexOf('active') >=0){
val += value.dataset.wat
}
})
// just for debug reasons.
$('#hierHier').html(val);
})
But it appears that the 'active' class gets added after the click event is fired. So the value in #hierHier is always behind one click, so to say.
How can I resolve this?
Or is there a better way to retrieve all the active buttons in this checkbox-array?
SOLVED
update: better solution Twitter Bootstrap onclick event on buttons-radio
http://jsfiddle.net/hA423/7/
I solved it using a timeout to make your function run after bootstrap events...
There must be some other ways to do it...
$('.btn').on('click',function(e){
setTimeout(count);
})
Hi Im trying to add onto a checkbox's values selected, so maintain the selected values but add other selected values. however the attribute doesn't add selected values. here is my attempt (p.s how would I in turn remove values selected and keep existing values selected?) thanks
$('.add_button').click(function() {
var values = $('input:checkbox:checked.ssremployeeids').map(function () {
return this.value;
}).get();
$('.ssremployeeid').attr('selected',values);
<div class="grs-multi-select-area" style="height:120px;width:150px;">
<div class="grs-multi-select-box ">
<input id="ssrBox" class="ssremployeeid" type="checkbox" name="ssremployeeid[]"
value="1312">
Amanda Becker
</div>
<div class="grs-multi-select-box "> // same as above I just collapsed it for viewing purposes
<div class="grs-multi-select-box ">
<div class="grs-multi-select-box ">
</div> //closes main div
});
I am still not sure if I understood you question correctly, but based one what I understood here's something you could try:
Sample Fiddle: http://jsfiddle.net/HFULf/1/
HTML
<div id="div1">
<input type="checkbox" name="cb1" value="val1" checked="checked" />
<input type="checkbox" name="cb2" value="val2"/>
<input type="checkbox" name="cb3" value="val3"/>
</div>
<div id="div2">
<input type="checkbox" name="cb1" value="val1"/>
<input type="checkbox" name="cb2" value="val2"/>
<input type="checkbox" name="cb3" value="val3"/>
</div>
<button id="btn1">Add Selected</button>
<button id="btn2">Remove Selected</button>
jQuery
//add selected values from first set of check-boxes to the second set
$('#btn1').click(function(e){
$('div#div1 input[type="checkbox"]:checked').each(function(){
$('div#div2 input[type="checkbox"]').eq($(this).index()).prop('checked',true);
});
});
//remove values from second set of check-boxes if selected in first one
$('#btn2').click(function(e){
$('div#div1 input[type="checkbox"]:checked').each(function(){
$('div#div2 input[type="checkbox"]').eq($(this).index()).prop('checked',false);
});
});
Hope, this will help you a little if not solve your problem entirely.