我使用循环放置了几个复选框。以下是生成循环的PHP代码:
<form class="small-box-footer" style="text-align:left;padding:10px;" method="post" name="nameHere">
<?php
while ($row39 = mysql_fetch_array($result)) {
$Referrer_ID = $row39['Subject_ID'];
$Referrer_Name = $row39['Subject_Name'];
?>
<input type="checkbox" class="subject-selected" name="subject" value="<?= $Referrer_ID ?>"> <?= $Referrer_Name ?><?= $Referrer_ID ?><br />
<?php
}
?>
</form>
在下面的代码片段中是从此PHP代码生成的HTML以及在选中复选框时创建链接的JavaScript代码;问题是if条件没有成真:
$( ".centre-selection" ).each(function() {
$( this ).attr( "href", '?module=module_progress_report&Subject='+ $('.subject-selected').val()+ '&Centre_Selected_ID='+ encodeURIComponent($( this ).attr('data-centre')) + '&Class_Selected_Year='+ encodeURIComponent($( this ).attr('data-year')) + '&Class_Selected_All='+ encodeURIComponent($( this ).attr('data-all-centre')) +'&StartDate='+$('#report_date_start').val()+'&EndDate=18/12/2016');
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="subject-selected" name="subject" value="2"> GCSE Maths2<br />
<input type="checkbox" class="subject-selected" name="subject" value="3"> GCSE English3<br />
<input type="checkbox" class="subject-selected" name="subject" value="4"> GCSE Science4<br />
<input type="checkbox" class="subject-selected" name="subject" value="5"> GCSE Art5<br />
<input type="checkbox" class="subject-selected" name="subject" value="6"> GCSE Sociology6<br />
<input type="checkbox" class="subject-selected" name="subject" value="8"> OCR Nationals ICT8<br />
<input type="checkbox" class="subject-selected" name="subject" value="9"> OCR Nationals Sports9<br />
<input type="checkbox" class="subject-selected" name="subject" value="10"> OCR Nationals Business Studies10<br />
<input type="checkbox" class="subject-selected" name="subject" value="11"> Entry Science11<br />
<input type="checkbox" class="subject-selected" name="subject" value="12"> Functional Skills English12<br />
<input type="checkbox" class="subject-selected" name="subject" value="13"> Functional Skills Maths13<br />
<input type="checkbox" class="subject-selected" name="subject" value="14"> ESOL14<br />
<input type="checkbox" class="subject-selected" name="subject" value="15"> Preparation for Working Life15<br />
编辑:
我认为这个问题没有得到妥善理解。下面是我写的第一个JavaScript,
$( ".centre-selection" ).each(function() {
//$( this ).attr( 'href', '?module=<?=$_REQUEST['module']?>&Subject='+ $( this ).attr('data-subject')+ '&Centre_Selected_ID='+ $( this ).attr('data-centre')+ '&Class_Selected_Year='+ $( this ).attr('data-year')+ '&Class_Selected_All='+ $( this ).attr('data-all-centre')+ '&StartDate='+ $( this ).attr('report_date_start')+ '&EndDate='+ $( this ).attr('data-attendance-check-end'));
$( this ).attr( "href", '?module=module_progress_report&Subject='+ $('.subject-selected').val()+ '&Centre_Selected_ID='+ encodeURIComponent($( this ).attr('data-centre')) + '&Class_Selected_Year='+ encodeURIComponent($( this ).attr('data-year')) + '&Class_Selected_All='+ encodeURIComponent($( this ).attr('data-all-centre')) +'&StartDate='+$('#report_date_start').val()+'&EndDate=18/12/2016');
} );
上面的JavaScript工作但是所选主题的值总是'2',这是第一个主题。
尝试一下,
// loop only for checked checkboxes
$('.subject-selected:checked').each(function(){
a=$(this).next('a'); // get the next anchor element
a.length && a.attr( "href", '?module=module_progress_report&Subject='+ this.value+ '&Centre_Selected_ID='+ encodeURIComponent(a.attr('data-centre')) + '&Class_Selected_Year='+ encodeURIComponent(a.attr('data-year')) + '&Class_Selected_All='+ encodeURIComponent(a.attr('data-all-centre')) +'&StartDate='+$('#report_date_start').val()+'&EndDate=18/12/2016');
});
至于@Fahad评论
// loop for all checkboxes
$('.subject-selected').each(function(){
a=$(this).next('a'); // get the next anchor element
if(this.checked){
a.length && a.attr( "href", '?module=module_progress_report&Subject='+ this.value+ '&Centre_Selected_ID='+ encodeURIComponent(a.attr('data-centre')) + '&Class_Selected_Year='+ encodeURIComponent(a.attr('data-year')) + '&Class_Selected_All='+ encodeURIComponent(a.attr('data-all-centre')) +'&StartDate='+$('#report_date_start').val()+'&EndDate=18/12/2016');
} else {
// not checked code here
}
});
更新了锚标记循环,每次只获取2
的原因是因为你使用$('.subject-selected').val()
而jquery将返回第一个复选框元素。因此,您需要使用锚标记索引来获取其等效的复选框值。
$( ".centre-selection" ).each(function(index) {
$( this ).attr( "href", '?module=module_progress_report&Subject='+
$('.subject-selected:eq('+index+')').val()+ ....);
});
你必须像这样遍历所有subject-selected
:
$('.subject-selected').each(function(){
if ($(this).is(":checked")) {
$(this).attr("href", '?module=module_progress_report&Subject=' + $("input[type='checkbox']").val() + '&Centre_Selected_ID=' + encodeURIComponent($(this).attr('data-centre')) + '&Class_Selected_Year=' + encodeURIComponent($(this).attr('data-year')) + '&Class_Selected_All=' + encodeURIComponent($(this).attr('data-all-centre')) + '&StartDate=' + $('#report_date_start').val() + '&EndDate=18/12/2016');
}
});
$(".subject-selected").change(function() {
if(this.checked) {
//Do stuff
}
});
尝试这样的事情
您需要为每个“输入”添加一个事件监听器来捕获事件(单击或更改或其他)。
尝试:
$('.subject-selected').each(function(){
$(this).on('click',function(e){
if ( $(this).is(':checked') ){
$(this).attr("href", '?module=module_progress_report&Subject=' + $("input[type='checkbox']").val() + '&Centre_Selected_ID=' + encodeURIComponent($(this).attr('data-centre')) + '&Class_Selected_Year=' + encodeURIComponent($(this).attr('data-year')) + '&Class_Selected_All=' + encodeURIComponent($(this).attr('data-all-centre')) + '&StartDate=' + $('#report_date_start').val() + '&EndDate=18/12/2016');
}
});
});