I am using PHP to assign a random ID to a checkbox, now I want to check that value of checkbox but because I don't know the ID, I dont know how to check it.
so here is the HTML :
<input class="citycheck"
id="<?php $city_id; // this is randomly generated ?>"
type="checkbox"
name="<?php echo $city_name"> <?php echo $city ?>
<div class"properties">Some Properties</div>
and my Javascript:
<script>
jQuery(document).ready(function($) {
// right now I am checking by class
// show or hide if it is already checked
if ($(".citycheck").is(':checked'))
$(".properties").show();
else
$(".properties").hide();
// show or hide if user clicked on the checkbox
$(".citycheck").click(function() {
if ($(this).is(":checked")) {
$(".properties").show();
} else {
$(".properties").hide();
}
});
});
</script>
but because there are many checkbox with class citycheck when one is checked, if another city is not checked, the properties are still shown.
How can I check the value of checkbox by ID when I don't know the ID yet?
Update
The reason I want the ID is because ID is unique and class is not. So using class, if one checkbox is checked it shows properties related to that class.
I have a checkbox for every city, every city had some properties, if I click on Chicago, then properties of Chicago are listed. Problem right now is that if I check Chicago, properties of Boston are also shown.
You could assign a pseudo class in your element and use this pseudo class to find all the elements in your page. Then you can check which of them are checked and do whatever is needed. I did the same also for details by assigning a pseudo class. As it is now your html code if someone change the name of the class from citycheck to whatever the behavior of you UI will not change at all, provided that will note move the elements, since we rely on the siblings. Please have a look at the following snippet:
$(function(){
$('.js-citicheck').on("change", function(){
var ele = $(this);
var details = ele.siblings('div.js-details');
if(ele.is(":checked")){
details.show();
} else {
details.hide();
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input class="citycheck js-citicheck"
id="berlin"
type="checkbox"
/>
<label for="berlin">Berlin</label>
<div class="details js-details" style="display:none">Berlin details.</div>
</div>
<div>
<input class="citycheck js-citicheck"
id="london"
type="checkbox"
/>
<label for="london">London</label>
<div class="details js-details" style="display:none">London details.</div>
</div>
<div>
<input class="citycheck js-citicheck"
id="paris"
type="checkbox"
/>
<label for="paris">Paris</label>
<div class="details js-details" style="display:none">Paris details.</div>
</div>
You Can add a prefix to the id
<input class="citycheck"
id="<?php echo 'id_'.$city_id; ?>" // this is randomly generated
type="checkbox"
name="<?php echo $city_name"> <?php echo $city ?>
<div class"properties">Some Properties</div>
and then :
var list = document.querySelectorAll('[id^="id_"]');
var list = $('[id^="id_"]');
traverse the list and check if it's checked or not
I think you can achieve everything you want to with simple jQuery selectors.
Working Example:
$(document).ready(function(){
$('.properties').hide();
$('.citycheck:checked + .properties').show();
$('.citycheck').change(function(){
$(this).next('.properties').toggle();
alert('The id of this checkbox is: ' + $(this).attr('id'));
});
});
input {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="sdnflfldja" class="citycheck" type="checkbox" name="Alphaville">
<div class="properties">Some Properties</div>
<input id="sdnfldfj" class="citycheck" type="checkbox" name="Betaville">
<div class="properties">Some Properties</div>
<input id="szdnnadsc" class="citycheck" type="checkbox" name="Gammaville">
<div class="properties">Some Properties</div>
<input id="sallddfa" class="citycheck" type="checkbox" name="Deltaville">
<div class="properties">Some Properties</div>
<input id="adlkfkfddsl" class="citycheck" type="checkbox" name="Epsilonville">
<div class="properties">Some Properties</div>
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 have two forms with radio type inputs, I would like that when we check an input in the 1st form another input is automatically checked in the second.
Here is the code of the 1st form:
<div class="color-box cta-box">
<label>Colors</label>
<div class="vpc-single-option-wrap">
<input id="cta-couleur_noir-color-selector" type="radio" name="couleur-color-selector" data-field="couleur-field" checked="" data-qtip="no">
<label for="cta-couleur_Noir-color-selector" class="vpc-custom-color custom" data-selector="couleur-field" data-color="Noir" data-name="Noir" data-oriontip="Noir" style="background-color:#000000"></label>
</div>
<div class="vpc-single-option-wrap">
<input id="cta-couleur_bleu-color-selector" type="radio" name="couleur-color-selector" data-field="couleur-field" data-qtip="no">
<label for="cta-couleur_Bleu-color-selector" class="vpc-custom-color custom" data-selector="couleur-field" data-color="Bleu" data-name="Bleu" data-oriontip="Bleu" style="background-color:#0419bd"></label>
</div>
</div>
And here is the code of the 2nd form:
<div class="color-box cta-box">
<label>Colors</label>
<div class="vpc-single-option-wrap">
<input id="cta-texte-en-tete-centre_noir-color-selector" type="radio" name="texte-en-tete-centre-color-selector" data-field="texte-en-tete-centre-field" checked="" data-qtip="no">
<label for="cta-texte-en-tete-centre_Noir-color-selector" class="vpc-custom-color custom" data-selector="texte-en-tete-centre-field" data-color="Noir" data-name="Noir" data-oriontip="Noir" style="background-color:#000000"></label>
</div>
<div class="vpc-single-option-wrap">
<input id="cta-texte-en-tete-centre_bleu-color-selector" type="radio" name="texte-en-tete-centre-color-selector" data-field="texte-en-tete-centre-field" data-qtip="no">
<label for="cta-texte-en-tete-centre_Bleu-color-selector" class="vpc-custom-color custom" data-selector="texte-en-tete-centre-field" data-color="Bleu" data-name="Bleu" data-oriontip="Bleu" style="background-color:#0419bd"></label>
</div>
</div>
So I would like that when I check the input with the ID cta-couleur_noir-color-selector in the 1st form, the input with the ID cta-texte-en-tete-centre_noir-color-selector "is automatically checked in the second form and the same for the id" cta-couleur_bleu-color-selector "which would correspond to the ID" cta-texte-en-tete-center_bleu-color-selector .
I tried with this script but it doesn't work:
<script type="text/javascript">
jQuery('input[type=radio][name=couleur-color-selector]').on('change', function () {
if ( jQuery(this).attr('id') == 'cta-couleur_bleu-color-selector'.checked) {
jQuery('#cta-texte-en-tete-centre_bleu-color-selector').prop(checked, true);
}else
{
jQuery('#cta-texte-en-tete-centre_noir-color-selector').prop('checked', true);
}
});
</script>
Could someone help me?
You must set unique value for each radio box in 1st form.
and check when radio click => get value and check to same unique value in 2nd form.
example:
$(document).on('click', '[type="radio"]', function () {
let value = $(this).val();
$('[value="'+value+'"]').prop('checked', true);
});
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).
My Full calender external events are displayed as following
<?php foreach ($plants as $plant) { ?>
<div class='fc-event evt'>
<input type="hidden" value="<?php echo $plant->hcpd_id;?>" class="abc">
<p class="evt_name"><?php echo $plant->hcpd_name;?></p>
</div>
<?php } ?>
And this is my jquery
$('#external-events2 .fc-event').each(function() {
var str = $(this).context;
$(this).data('event', {
title: $.trim($(this).text()),
stick: true,
color : '#4AC948',
className : "sub",
id : //need to add the id here
});
});
I want to give a specific id to each event. (taken from the database. It is given in the hidden input field)
Following is one of the generated divs.
I want to get the hidden id of the following $(this).context result
<div class="fc-event evt ui-draggable ui-draggable-handle">
<input type="hidden" value="1" class="abc">
<p class="evt_name">My Plant 1</p>
</div>
Any idea of how to retrieve that.
I tried string replacing, but didn't work.
What event are you using? For example, if you are using the click event:
$('.fc-event').click(function(){
//Get the ID
var eventID = $(this).find('input[type="hidden"]').val();
//Do whatever you want with the ID here.
});
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.