Hi guys i have two checkboxes.
<li>
<?=form_checkbox('heart_rate', 'yes', sel_checkbox($admission['heart_rate'], $observation[0]->heart_rate))?>
<?=form_label('Heart Rate')?>
</li>
<li>
<?=form_checkbox('blood_pressure', 'yes', sel_checkbox($admission['blood_pressure'], $observation[0]->blood_pressure))?>
<?=form_label('Blood Pressure')?>
</li>
i want to create a third checkbox labelled all so that when it is ticked all my checkboxes are ticked. Any ideas?
Useing jQuery this can be done very easily, just give id to the check all checkbox checkAllId:
And the following code will check all the checkbox:
$('#checkAllId').change(function(){
if($(this).attr('checked')){
//uncheck all the checkboxes
$("input[type='checkbox']").each(
function() {
$(this).attr('checked',false);
}
);
}else{
//check all the checkboxes
$("input[type='checkbox']").each(
function() {
$(this).attr('checked',true);
}
);
}
});
you will have to give id to checkbox as:
I think you have not given id properly try this :
<?php
$data = array(
'name'=> 'checkAllId',
'id'=> 'checkAllId',
);
form_checkbox($data)
?>
Also confirm in the firebug whether id is coming properly or not.
Hope this will help!
$(function(){
$('input[class=3rd]').on('click',function(){
var this = $(this);
if($(this.':checkbox:checked').length > 0)
{
// If 3rd is checked, check all
$('.1st').prop('checked', true);
$('.2nd').prop('checked', true);
}
else
{
// Esle uncheck all
$('.1st').prop('checked', false);
$('.2nd').prop('checked', false);
}
})
})
Related
I'm trying to send data onclick via ajax with a radio button. If the radio button is clicked and checked, value of 1 is set in the database. If the radio button is already checked, but clicked to uncheck it, the value of 0 is sent to the database. The code I'm using sends the value onclick and checks the radio button but does not uncheck and hence does not send the value to the database. Please help.
<input type="radio" name="home['. $row["id"].']" id="'. $row["id"].'">
<script>
$(document).ready(function(){
$('input[type="radio"]').click(function(){
var checked = $(this).prop('checked');
if (checked != 'checked') {
$(this).prop('checked', true);
var id = $(this).attr('id');
$.ajax({
url:"updateaddress.php",
method:"POST",
data:{home:"1",id:id,},
});
} else if (checked == 'checked') {
$(this).prop('checked', false);
var id = $(this).attr('id');
$.ajax({
url:"updateaddress.php",
method:"POST",
data:{home:"0",id:id,},
});
}
});
});
</script>
A checkbox and
$('input[type="checkbox"]').on("click", function(){
$.post("updateaddress.php",{home:this.checked,id:this.id});
});
is all you need
If you MUST use a radio, have a look at this
How to Check/Uncheck single radio button
$('input[type="radio"]').on("click", function(){
$.post("updateaddress.php",{home:this.checked,id:this.id});
this.checked=!this.checked;
});
Radio buttons are used when there is multiple options and user should check only one option.so,user can't uncheck a radio button when already checked.you explicitly make a onclick listener and change the radio button status.but it's not advisable.you can use checkbox for this purpose with onchange event.
$(checkEle).on("change",function(){
var status = $(this).prop("checked");
sendStatus(status);
}
<input type="radio" name="home['. $row["id"].']" id="'. $row["id"].'">
<script>
$(document).ready(function(){
$('input[type="radio"]').click(function(){
var data = {home:"0",id:$(this).attr("id")};
if ($(this).is(":checked")) {
data = {home:"1",id:$(this).attr("id")};
}
$.ajax({
url:"updateaddress.php",
method:"POST",
data:data,
});
});
});
</script>
You can use this script.Just check if radio button is checked or not and send your values accordingly.
i have invoice page and customer select the invoice and pay. invoice page if invoices are multiple then customer need to select check box each then click on Generate Invoice for payment. i want if invoice are multiple customer should check All then its work customer dont have choice select single. he should select All the check boxes then its work.
i think on page javascript code is below:
<script language="JavaScript">
function checkAll(theForm, cName) {
for (i=0,n=theForm.elements.length;i<n;i++)
if (theForm.elements[i].className.indexOf(cName) !=-1)
if (theForm.elements[i].checked == true) {
theForm.elements[i].checked = false;
} else {
theForm.elements[i].checked = true;
}
}
</script>
on invoice page i have also option select All check box
code is below:
<input type="checkbox" name="kk" id="kk" onClick="checkAll(document.getElementById('form4'), 'chk1');" >
when invoice are more multiple from database check code is:
<input name="orderNo[]" <?php if ($SQLRow["priceStatus"]=="Received") { ?> disabled="disabled"<?php } ?> type="checkbox" id="orderNo[]" value="<?php echo $SQLRow["orderNo"];?>" class="chk1" />
i just want one help if all the check boxes are selected then its work.
Try this
$('#kk').on('click', function() {
if($(this).prop("checked")){
$('input:checkbox').each(function() {
$(this).attr("checked", "checked");
$(this).prop("checked", true);
});
}
else{
$('input:checkbox').each(function() {
$(this).removeAttr("checked", "checked");
$(this).prop("checked", false);
});
}
});
Jsfiddle is here
I would like some help with checkbox validation.
If you look in below picture, when user click the image, the checkbox becomes selected.
What I would want is if all checkbox are selected alert an simple message.
This is a code to select checkbox by clicking on an image.
$( document ).ready(function() {
$("#roll-<?php echo $row['id_vnr']; ?><?php echo $cut_counter; ?>").click (function(){
var $$ = $(this)
if( !$$.is('.checked')){
$$.addClass('checked');
$('#imgCheck-<?php echo $row['id_vnr']; ?><?php echo $cut_counter; ?>').prop('checked', true);
}
});
});
So I can select check box by clicking on an image. How I can alert message if all check box are selected. Soon user click last picture, the picture will disappear, the red tick box will appear and user should see alert message.
Thank you in advance.
You can achieve this by getting the number of elements with the class 'checked'. If the number is 6, then you can show the alert.
Try this way:
var checkboxes = $('[type="checkbox"]');
checkboxes.on('change', function() {
var checked = $('[type="checkbox"]:checked');
console.log('all:', checkboxes.length, ' / ', 'checked:', checked.length);
if (checkboxes.length === checked.length) {
console.log('ALL CHECKED!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">1
<input type="checkbox">2
<input type="checkbox">3
You can use the following javascript code:
$(function(){
$('input[type="checkbox"]').click(function() {
totalCheckboxCount = $('input[type="checkbox"]').length;
selectedBoxesCount = $('input[type="checkbox"]:checked').length;
if(totalCheckboxCount == selectedBoxesCount) {
alert("All checkboxes selected!");
}
});
});
This code allows the user to select one or more models of cars graphically on a web page. I am in need to check if more than one was selected. How can I get this to count the number of selected items and if it's great than one alert("something")?? In short, I need to know if both Lexus and Inifiti were chosen in the example code here. I really need the count so if it's greater than 1 selected. Any help is great appreciated, not sure what I am doing wrong .
<div class="options-item-wrapper clearfix">
<?php
$modelOptions = array(
0 => array('title' => 'Lexus'),
1 => array('title' => 'Infiniti')
);
foreach ($modelOptions as $modelOption) {
$selected = '';
$optionValue = '';
if(in_array($modelOption['title'], $modelArray)) {
$selected = 'selected';
$optionValue = '<input class="vehicle-option"
type="hidden" name="model[]"
value="'.$modelOption['title'].'">';
}
echo '<div class="options-item '.$selected.'" data-vehicle="'.
$modelOption['title'].'">
<div>'.$modelOption['title'].'</div>
'.$optionValue.' </div>';
}
?>
</div>
I have tried this but no luck thus far :
var checkedNum = $('input[name="model[]"]:selected').length;
alert(checkedNum);
if (checkedNum > 1) {
alert('Validating the form2');
// User didn't check any checkboxes
} else {
die();
}
Your code doesn't work because hidden input elements don't have a selected state.
If I understand your code correctly, you add the class 'selected' to your options items if they're selected. Wouldn't you just need to count the number of options items with the selected class?
var checkedNum = $('.options-item.selected').length;
alert(checkedNum);
if (checkedNum > 1) {
alert('Validating the form2');
// User didn't check any checkboxes
} else {
die();
}
I dont get any output for my onchange event for a radio button.
I want to select 3 out of 4 a radio buttons and disable a text input field and the other enables the text input.
Currently I cant get it to output anything.
echo $this->Form->input('startDate',array('id'=>'startdatebox','label' => 'Start Date','class'=>'datepicker', 'type'=>'text','style'=>'width:100px;height:30px','value' => $datestart));
..
echo $this -> Form -> input('dateRange',
array('id'=>'dateRange2','label' => '<h6>Date Range</h6>','type' => 'radio',
'value' =>$dateSelect,'name'=>'dateRange2' ,'options' => $selectoption))
;
<script type="text/javascript">
$("input[name='data[User][dateRange2]']").on("click",function() {
$('#startdatebox, #enddatebox').prop('disabled', $(this).val() != 3);
alert( 'aasda');
});
First call onclick on your radio button, as like
echo $this -> Form -> input('dateRange',
array('id'=>'dateRange2',
'label' => '<h6>Date Range</h6>',
'type' => 'radio',
'value' =>$dateSelect,
'name'=>'dateRange2' ,
'options' => $selectoption,
'onclick'=> 'myFunc(this.value)'
)
);
Then Add javascript
<script type="text/javascript">
function myFunc(val) {
if(val != 3) {
document.getElementById("startdatebox").disabled = true;
document.getElementById("enddatebox").disabled = true;
} else {
document.getElementById("startdatebox").disabled = false;
document.getElementById("enddatebox").disabled = false;
}
}
</script>
Or, to change the disabled property of input fields using jQuery 1.6 +
function myFunc(val) {
$('#startdatebox, #enddatebox').prop('disabled', $(this).val() != 3);
}
I hope you may help it.
onChange() is not working for radio button, but it works for checkbox or select.
In order to detect the select action for radios, you have to use onclick() function instead. As Supravat's answer, you need to pass "this.value" in the onclick() function, and you get the selected value in javascript.