How to force jquery's trigger function to trigger all events in forloop?
Question
I am working on a page where I am using js, php, jquery for saving checkbox input field's value in a javascript array, and later I am using that array, but I dont know why when I am removing fields from php foreach loop and manually giving different value to every checkbox everything works fine as you can see in jsfiddle which is working fine, it is first displaying hi , than hi,bi and in last hi,bi,goodby as expected.
But when I am populating these input field's value using foreach loop of php, it is 1st displaying blank, than hi than hi,bi and it is not displaying last hi,bi,goodby . I dont know where I am getting this error.
my html code;
<input type="checkbox" id="selectall"/>Select all<br>
<input id="live_prod_input" type="checkbox" name="live_prod_chk" value="hi" onclick="click_alert(this.value)"/>Check box 1<br>
<input id="live_prod_input" type="checkbox" name="live_prod_chk" value="bi" onclick="click_alert(this.value)"/>Check box 2<br>
<input id="live_prod_input" type="checkbox" name="live_prod_chk" value="goodby" onclick="click_alert(this.value)"/>Check box 3<br>
following is my php code for input field.
<?php
foreach ($result as $value)
{
?>
<input id="live_prod_input" type="checkbox" name="live_prod_chk" value="<?= $value['p_id'] ?>" onclick="showPause('show_hide_multi_pause')"/>
<?php
}
?>
following is result array
Array
(
[0] => Array
(
[p_id] => 110
[left(p_title,30)] => Samsung GALAXY Note II N7100 [
[left(p_features,30)] => OS : Android , Display : 4.8&q
[p_status] => 1
[od_price] => 800
[od_offer_price] => 750
[pi_image1] => Samsung-Galaxy-S3-Neo_1_110.jpg
[o_sqty] => 65
[o_cond] => New
[od_htime] => 2 Business days
)
[1] => Array
(
[p_id] => 127
[left(p_title,30)] => Samsung Galaxy Note Edge SM-N9
[left(p_features,30)] => this is DeMo FeAtUrE
[p_status] => 1
[od_price] => 654
[od_offer_price] =>
[pi_image1] => Samsung Galaxy Note Edge SM-N915G_1_127.jpg
[o_sqty] => 65
[o_cond] => Old
[od_htime] =>
)
)
and I am inserting input value as $value['p_id'] .
2 answers
solution1
1 ACCPTED 2015-04-20 12:26:38
We can not use same Id for multiple elements in same page. Instead of using Id you can use class for each checkbox. For example, Instead of $('input#live_prod_input').each(function() {})
use $('input.live_prod_input').each(function(){})
in following checkbox
<input id="live_prod_input" type="checkbox" name="live_prod_chk" value="hi" onclick="click_alert(this.value)"/>Check box 1<br>
Replace above Id with class.
solution2
0 2015-04-20 06:50:25
I've reproduced your code on my server and it works with a small change:
On the php loop try changing
onclick="showPause('show_hide_multi_pause')"
to
onclick="click_alert(this.value)"
This is the php loop that works for me:
foreach ($result as $value)
{
$p_id = $value['p_id'];
echo <<< LOB
<input id="live_prod_input" type="checkbox" name="live_prod_chk" value="$p_id" onclick="click_alert(this.value)"/>
LOB;
}
COMPLETE HTML CODE:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
window.click_alert = function(val) //equivalent to function click_alert()
{
csv_pause = [];
var chboxs = document.getElementsByName("live_prod_chk");
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
csv_pause.push(chboxs[i].value);
}
}
alert(csv_pause);
}
$(document).ready(function() {
$('#selectall').click(function() { //on click
if(this.checked) { // check select status
$('input#live_prod_input').each(function() { //loop through each checkbox
// this.checked = true; //select all checkboxes with class "checkbox1"
$(this).trigger('click');
// $('input#live_prod_input').trigger('click');
}
);
}else{
$('input#live_prod_input').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
});
</script>
</head>
<body>
<input id="live_prod_input" type="checkbox" name="live_prod_chk" value="110" onclick="click_alert(this.value)"/>
<input id="live_prod_input" type="checkbox" name="live_prod_chk" value="120" onclick="click_alert(this.value)"/>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.