My radio button are named dynamically. How to check all the checkbox on div click. The div and each radio has unique id. The div actually represent cards. I want upon clicking on card how to select all the listed radio in div
How to dynamically get all child node from javascript but check all the radio
<div id=<?= ($counter-1) ?> class="card categoryCard" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title"><?= $rows[$counter-1]["TICKETDESCRIPTION"]?></h5>
<input type="radio" id=<?='TICKETDESCRIPTION'.($counter-1) ?> name="TICKETDESCRIPTION" >
<p class="card-text"><label>RM <?= $rows[$counter-1]["TICKETPRICE"]?></label></p>
<input type="radio" id=<?='TICKETPRICE'.($counter-1) ?> name="TICKETPRICE" >
</div>
</div>
Below is my javascript code
$('.categoryCard').click(function(){
var id = $(this).attr('id');
var radiobtn = document.getElementById("TICKETDESCRIPTION"+id);
radiobtn.checked = true;
alert(id);
});
// assuming jquery
$('.categoryCard').click(function(e){
$('input[type="radio"]', this).each( function( i) {
$(this).prop('checked', true);
});
});
There are many ways to implement the same. I've described the two ways.
You must not use the ID as duplicate.
ID is identifier for the elements, so it must not be duplicate.
$('.categoryCard').click(function(e){
$('input[type="radio"]', this).each( function( index, element) {
$(element).prop('checked', true);
});
});
$('.categoryCard').click(function(e){
var id = $(this).attr('id');
$('input[data-details="'+ id +'"]', this).each( function( index, element) {
$(element).prop('checked', true);
});
});
.categoryCard{
border: 1px solid #d4d4d4;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="1" class="card categoryCard" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Desc</h5>
<input type="radio" name="TICKETDESCRIPTION">
<p class="card-text">Price</p>
<input type="radio" name="TICKETPRICE" >
</div>
</div>
<!-- 2nd Method there must be no duplicate ID -->
<div id="2" class="card categoryCard" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Desc</h5>
<input type="radio" name="TICKETDESCRIPTION" data-details ="1">
<p class="card-text">Price</p>
<input type="radio" name="TICKETPRICE" data-details ="1" >
</div>
</div>
It can be also solved like this:-
$('.categoryCard').click(function(){
$(this).find('input[type="radio"]').each(function() {
$(this).prop('checked', true);
});
});
Related
how can I add the class "disabled" to the second checkbox if the first one is selected and vice versa.
I don't know where I'm wrong, this is my code, in which I imagined two functions to include where I will turn off the secondary checkbox in each. (maybe it can in one function for sure, but I don't know), this is my example, if someone can correct me where I went wrong, thank you.
function disableNewmobileOption(ev) {
ev.preventDefault();
var inputElementLabel = $(ev.currentTarget);
var inputElement = inputElementLabel.siblings("input");
if (inputElement.is(':checked')) {
if (inputElement.attr("id") === "b_mobnr") {
$(".newmobile .circle-buttons").addClass("disabled");
} else {
$(".b_mobnr .circle-buttons").removeClass("disabled");
}
}
}
function disableBMobOption(ev) {
ev.preventDefault();
var inputElementLabel = $(ev.currentTarget);
var inputElement = inputElementLabel.siblings("input");
if (inputElement.attr("id") === "newmobile") {
$(".b_mobnr .circle-buttons").addClass("disabled");
} else {
$(".newmobile .circle-buttons").removeClass("disabled");
}
}
<div class="row">
<div class="col-sm-4 newmobile">
<h4>Optionen</h4>
<span class="circle-buttons">
<input type="checkbox" name="b_mobnr" id="b_mobnr" value="0">
<label for="b_mobnr" onclick="disableNewmobileOption(event)">Mobile Option</label>
<div class="check square-check"></div>
</span>
</div>
<div class="col-sm-12 b_mobnr">
<span class="circle-buttons">
<input type="checkbox" name="newmobile" id="newmobile" value="0">
<label for="newmobile" onclick="disableBMobOption(event)">Newmobile Option </label>
<div class="check square-check"></div>
</span>
</div>
</div>
You can use .not() to add disabled class to other span tag when your checkbox is checked.Other way would be passing this inside your function call then depending on if the checkbox is checked add class to other span.
Demo Code :
/*$(".circle-buttons input[type=checkbox]").on("change", function() {
$(".circle-buttons").removeClass("disabled") //remove from all
if ($(this).is(":checked")) {
$(".circle-buttons").not($(this).closest(".circle-buttons")).addClass("disabled") //other span tag
}
})*/
function disableNewmobileOption(el) {
var inputElement = $(el);
//remove class from all
$(".circle-buttons").removeClass("disabled");
//check if checkbox is checked
if (inputElement.is(':checked')) {
//add class to other
$(".b_mobnr .circle-buttons").addClass("disabled");
}
}
function disableBMobOption(el) {
var inputElement = $(el);
$(".circle-buttons").removeClass("disabled");
if (inputElement.is(':checked')) {
$(".newmobile .circle-buttons").addClass("disabled");
}
}
.disabled {
color: grey;
pointer-events: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4 newmobile">
<h4>Optionen</h4>
<span class="circle-buttons">
<!--aded click event on checkbox-->
<input type="checkbox" name="b_mobnr" id="b_mobnr" onclick="disableNewmobileOption(this)" value="0">
<label for="b_mobnr" >Mobile Option</label>
<div class="check square-check"></div>
</span>
</div>
<div class="col-sm-12 b_mobnr">
<span class="circle-buttons">
<input type="checkbox" name="newmobile" id="newmobile" onclick="disableBMobOption(this)" value="0">
<label for="newmobile">Newmobile Option </label>
<div class="check square-check"></div>
</span>
</div>
</div>
I try to show a message when someone clicks on a checkbox.
Do you have any idea to display a message?
I tried, but it doesn't work.
The Checkbox :
echo '<div><input type="checkbox" value="' . $products_id .'" id="productsCompare" title="Compare" /> Compare</div>';
the script including the element to show a message
<script>
$(function() {
$('input[type=checkbox]').change(function(){
var chkArray = [];
$('#container').html('');
//put the selected checkboxes values in chkArray[]
$('input[type=checkbox]:checked').each(function() {
chkArray.push($(this).val());
});
// message
var toggle = false;
$('#productsCompare').click(function() {
$('input[type=checkbox]').attr('checked',!toggle);
toggle = !toggle;
$(\'productsCompare\').show();
});
//If chkArray is not empty show the <div> and create the list
if(chkArray.length !== 0){
$.ajax({
method: 'POST',
url : "http://localhost/.........test.php",
data : {product_id: chkArray},
});
}
});
})
</script>
The message
<div class="col-md-12" id="productsCompare" style="display:none;">
<div class="separator"></div>
<div class="alert alert-info text-md-center">
<span class="text-md-center">
<button class="btn">Compare</button>
</span>
</div>
</div>
Check my example and try to modify it with your case.
$("#box").addClass('novis');
$("#ch").on('click',function(){
$("#box").toggleClass('novis','vis');
});
.vis{ display: block; }
.novis{ display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Show</label>
<input type="checkbox" id="ch" unchecked>
<div id="box">
<p>Hello world</p>
</div>
I am building script where I can add some dynamic fields and then delete it if I want. But I can't delete that first el class in my script, because it deletes all within input_fields_container class. How to do it correctly? Here's my code:
<div class="input_fields_container">
<div class="col-lg-12">
<div class="col-lg-2"></div>
<button class="btn btn-sm btn-primary add_more_button" style="float: left; margin-bottom: 10px;">
#lang('main.add more fields')
</button>
</div>
#foreach(Auth::user()->test as $data)
<div class="el">
<div class="form-group">
<label class="col-lg-2 control-label">#lang('main.test')</label>
<div class="col-lg-6">
<input type="text" name="test[]" class="form-control" value="{{ $data->test }}" >
</div>
</div>
</div>
#endforeach
</div>
<script type="text/javascript">
$(document).ready(function() {
var max_fields_limit = 10; //set limit for maximum input fields
var x = 1; //initialize counter for text box
$('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button
e.preventDefault();
if(x < max_fields_limit){ //check conditions
x++; //counter increment
$('.input_fields_container').append('<div class="el"><div class="form-group"><label class="col-lg-2 control-label">#lang('main.test')</label><div class="col-lg-6"><input type="text" name="test[]" class="form-control"></div></div><div class="form-group"><label class="col-lg-2 control-label"></div></div><div>#lang('main.delete')</div></div>');
}
});
$('.input_fields_container').on("click",".remove_field", function(e){ //user click on remove text links
e.preventDefault(); $(this).parents().eq(1).remove(); x--;
})
});
</script>
Your HTML in your append is structured wrong. Your div for the remove_field is not inside the '.el' div.
Try this...
$('.input_fields_container').append('<div class="el"><div class="form-group"><label class="col-lg-2 control-label">Main.test</label><div class="col-lg-6"><input type="text" name="test[]" class="form-control"></div></div><div class="form-group"><label class="col-lg-2 control-label"></div><div>main.delete</div></div></div>');
https://jsfiddle.net/chadsaun/Ljxw03Lp/
Try this
You need to change the class="el" to id="el"
$(document).on('click', '.remove_field', function () {
$('#el').closest('#el').remove();
});
You can give that 'a' tag an onclick function by id in the for loop. and one id for div with class name 'el' something like this code below:
$('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button
e.preventDefault();
if(x < max_fields_limit){ //check conditions
x++; //counter increment
$('.input_fields_container').append('<div class="el" id='el" + id +"'>
<div class="form-group">
<label class="col-lg-2 control-label">#lang('main.test')</label>
<div class="col-lg-6"><input type="text" name="test[]" class="form-control"></div>
</div>
<div class="form-group"><label class="col-lg-2 control-label"></div>
</div>
<div>
#lang('main.delete')
</div>
</div>');
}
});
And then you can add the deletInput function like this code below, in this function the method finds div with the id of el+id and remove it:
function deleteInput(id){
$('#el'+id+'').remove();
}
Remember your id for el element must be unique.
This is the concept of removing inputs by id.
Hope this would help!
I'm trying to do detection onLoad to see if a radio button is checked. If it is then I want to output some text into a div. Currently it isn't working onLoad and the functionality only works on click.
I'm using local storage to remember if a user has selected certain fields on refresh and this works fine - so whatever radio button was selected before a refresh shows after.
This is the code to change the text onLoad:
$(document).ready(function() {
var circuitNum = $('input[name="options[numberCircuitsMetre]"]:checked').val();
if (circuitNum == 'As many as possible per metre') {
$('#circuit').text('As many as possible per metre');
}
}
See full code:
// Circuit Select
// Toggle Metre Question and fill out summary
$('input[name="options[numberCircuitsMetre]"]').click(function(){
if($(this).attr("value")=="As many as possible per metre"){
$(".toggleQuestion").hide();
$('#circuit').text('As many as possible per metre');
}
if($(this).attr("value")=="Custom number"){
$(".toggleQuestion").show();
}
});
var circuitNum = $('input[name="options[numberCircuitsMetre]"]:checked').val();
if (circuitNum == 'As many as possible per metre') {
$('#circuit').text('As many as possible per metre');
}
if (circuitNum == 'Custom number') {
if($('.circuitsNum').val() == ''){
$('.circuitsValidation').html("<span class='flash'>Please add the number of circuits you want per metre</span>");
$('.circuitsNum').addClass("errorBorder");
var errorMessage = 'true';
} else {
$('#circuit').text('#circuitsNum'.value || '');
}
$(".toggleQuestion").show();
}
$("#circuitsNum").on('change keydown paste input', function() {
$('#circuit').text(this.value || '');
}).change();
$('#no').click(function() {
var term = $('#circuitsNum').val();
$('#circuit').text(term || '');
});
.radio-toggle {
margin-bottom: 30px;
}
.toggleQuestion {
display: none;
padding-top: 20px;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<!-- No. of Circuit Designs -->
<fieldset>
<label>Do you want as many circuit designs per metre as possible?</label>
<div class="radio-toggle">
<div class="row collapse radio-shack">
<div class="large-6 columns">
<div class="radio-margin">
<div class="radio-zone">
<input type="radio" name="options[numberCircuitsMetre]" id="yes" class="substrate" value="As many as possible per metre" checked="checked" />
<div class="check-cover">
</div>
<div class="check"></div>
<label for="yes">
<div class="label-head"><strong>Yes</strong></div>
</label>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="radio-margin">
<div class="radio-zone">
<input type="radio" name="options[numberCircuitsMetre]" id="no" class="substrate" value="Custom number"/>
<div class="check-cover">
</div>
<div class="check"></div>
<label for="no">
<div class="label-head"><strong>No</strong></div>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="toggleQuestion">
<label>How many circuit designs per metre would you like?</label>
<input type="number" name="options[numberCircuits]" step="any" placeholder="Add the number of circuits per metre..." class="circuitsNum number" id="circuitsNum">
<p class="circuitsValidation"></p>
</div>
</fieldset>
<div class="summary-row">
<div class="summary-cell summary-head">
<strong>No. of circuits:</strong>
</div>
<div class="summary-cell">
<span id="circuit"></span>
</div>
</div>
try this https://jsfiddle.net/0zzdkb32/44/ I just add this code
$(document).ready(function() {
$('input[name="options[numberCircuitsMetre]"]').each(function() {
if ($(this).val() == localStorage.getItem('selected')) {
$(this).click();
if($(this).val()=="As many as possible per metre"){
$(".toggleQuestion").hide();
setTimeout(function(){
$('#circuit').text('As many as possible per metre');
}, 100);
}
if($(this).attr("value")=="Custom number"){
$(".toggleQuestion").show();
}
}
});
})
and add
localStorage.setItem('selected', $(this).val());
in your click event
I have a button Resend , and on click of it , the checkboxes get enable against the following:
id="AlertSent"
id="AlertNotSent"
id="AlertInProgress"
Now the DIV Code for Above mentioned DIVS is as below
<div class="span9">
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox1" name="checkbox1"/>
</div>
<div id="AlertSent" class="span12">
<label><spring:message code='alert.sent' />:</label>
</div>
</div>
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox2" name="checkbox2"/>
</div>
<div id="AlertNotSent" class="span12">
<label><spring:message code='alert.not.sent'/>:</label>
</div>
</div>
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox3" name="checkbox3" class="required" />
</div>
<div id="AlertInProgress" class="span12">
<label> <spring:message code='alert.in.progress' />:</label>
</div>
</div>
</div>
The button Code for Resend and Done is
<input type="button" value="button" id="resend"/>
<input type="button" value="button" id="done"/>
The JQuery Code is
var j$ = jQuery.noConflict();
j$(document).ready(function() {
var resendbtn = j$('#resend');
var allChkBox = j$('input[name="enableCheckBox"]');
var verifyChecked = function() {
if ! $('#resend').click {
allChkBox.attr('disabled', 'disabled');
} else {
allChkBox.removeAttr('disabled');
}
};
verifyChecked();
resendbtn.change(verifyChecked);
});
The requirement is on click of Resend, the checkboxes appear against above DIVS (AlertSent, AlertNotSent and AlertInProgress), and the Resend button Becomes Done, and if a User unchecks all the checkboxes then the Done Button becomes Resend again.
How do I write a JQuery/JavaScript code to achieve above?
Please suggest
It's hard to know exactly what you want here, but perhaps this will get you started:
http://jsfiddle.net/ZqH7B/
to handle showing the checkboxes:
$("#resend").on( 'click', function () {
$('.enableCheckBox').css('visibility', 'inherit');
$(this).hide().next().show();
$('input:checkbox').prop('checked', true);
});
to handle uncheck behavior:
$('input[type=checkbox]').on( 'change', function() {
var num = $('input:checked').length;
if ( num == 0 ) { $('#resend').show().next().hide(); }
});
Try following code:
HTML:
<input type="checkbox" class="chk">
<input type="button" value="Resend" class="toggle">
JS:
$(document).ready(function(){
$(".chk").prop("checked","checked");
$(".chk").css('display','none');
$(".toggle").click(function(){
$(".chk").css('display','block');
$(".chk").prop("checked","checked");
$(this).val("Done");
});
$(".chk").change(function(){
var all = $(".chk").length;
var chked = $(".chk").not(":checked").length;
if(all == chked){
$(".chk").css('display','none');
$(".toggle").val("Resend");
}
})
});
JSFIDDLE DEMO