我遇到了复选框点击事件的问题。 用户将填写5个输入，这些输入创建输入值的全局变量。 然后，用户填写表单的其余部分，然后单击验证复选框以同意规则/规定。此复选框应填充一个隐藏的textarea，其中包含5个变量和一些预先确定的文本。
它似乎在大部分工作，但我收到一些空白条目。因此，复选框触发事件未正确触发。我做了大量的浏览器测试，无法查明原因。
我正在使用Shortstack App平台上的一些自定义代码，用于facebook的竞赛/抽奖活动。
我已尝试以下两项来触发事件，但都没有解决问题。
$('#promotion_agree').change(function() {
和
$('#promotion_agree').on("click", function(event) {
我的代码如下。非常感谢任何帮助。
<script type="text/javascript">
jQuery(document).ready(function($) {
//Fade out the Agree to Rules/Regulations checkbox
$('#promotion_agree_block').fadeOut();
//Input Field 1
$('#promotion_custom_field_2').bind("keyup change", function() {
fieldone = $(this).val();
$('#promotion_custom_field_5').val(fieldone);
});
//Input Field 2
$('#promotion_custom_field_3').bind("keyup change", function() {
fieldtwo = $(this).val();
$('#promotion_custom_field_7').val(fieldtwo);
});
//Input Field 3
$('#promotion_custom_field_4').bind("keyup change", function() {
fieldthree = $(this).val();
$('#promotion_custom_field_8').val(fieldthree);
});
//Input Field 4
$('#promotion_custom_field_17').bind("keyup change", function() {
fieldfour = $(this).val();
$('#promotion_custom_field_9').val(fieldfour);
});
//Input Field 5
$('#promotion_custom_field_18').bind("keyup change", function() {
fieldfive = $(this).val();
$('#promotion_custom_field_37').val(fieldfive);
$('#promotion_agree_block').fadeIn();
});
////Post the global variables to the hidden textarea along with the included text
$('#promotion_agree').on("click", function(event) {
//The following code is placed in the textarea field that is hidden
$('#promotion_image_description').html('' + fieldone + ' walked through The Fair, after enjoying the Superdogs show where he saw lots of ' + fieldtwo + ', ' + fieldthree + ' dogs. They leapt through hoops and over jumps and ' + fieldfour + ' with their trainers. He thought about how great it would be if his dog ' + fieldfive + ' became a Superdog! Maybe one day...\r\n\r\n Submitted Words: ' + fieldone + ', ' + fieldtwo + ', ' + fieldthree + ', ' + fieldfour + ', ' + fieldfive + ''.replace(/\r\n/g, '\n').split('\n'));
});
});
</script>
编辑为以下原始帖子
HTML代码看起来像这样：
这是其中一个输入：
<div class="field_block custom_field_2_field_block text_field_type_block center-input" id="promotion_custom_field_2_block">
<label for="promotion_custom_field_2"><span class="main_field_label">Field One</span><span class="required">*</span></label>
<input class="small" id="promotion_custom_field_2" name="promotion[custom_field_2]" type="text">
</div>
这是触发事件发布到textarea的复选框：
<div class="field_block agree_field_block black-text" id="promotion_agree_block" style="display: block;">
<label for="promotion_agree"><input id="promotion_agree" name="promotion[agree]" type="checkbox" value="1"> <span class="main_field_label">I have read and agree to the rules & regulations</span><span class="required">*</span></label>
</div>
在选中上面的复选框后，文本区看起来像这样。
<div class="field_block image_description_field_block" id="promotion_image_description_block">
<label for="promotion_image_description"><span class="main_field_label">MadLib Story</span></label>
<textarea class="medium" id="promotion_image_description" name="promotion[image_description]">test1 walked through The Fair, after enjoying the Superdogs show where he saw lots of test2, test3 dogs. They leapt through hoops and over jumps and test4 with their trainers. He thought about how great it would be if his dog test5 became a Superdog! Maybe one day...
提交的单词：test1，test2，test3，test4，test5
第二次修改 这是一个编辑到我的Javascript代码，以便在输入每个元素时填充描述字段。由于某种原因，表单不会在提交时填充描述文本，所以我认为这可能有效：
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#promotion_custom_field_2').bind("keyup change", function() {
//Create Global Variable for Text entered
fieldone = $(this).val();
//Add Global Variable to Hidden Field
$('#promotion_custom_field_5').val(fieldone);
//Update Description Field if Changed
$('#promotion_image_description').html('' + fieldone + ' walked through The Fair, after enjoying the Superdogs show where he saw lots of '
+ fieldtwo + ', ' + fieldthree + ' dogs. They leapt through hoops and over jumps and '
+ fieldfour + ' with their trainers. He thought about how great it would be if his dog '
+ fieldfive + ' became a Superdog! Maybe one day...\r\n\r\n Submitted Words: ' + fieldone + ', ' + fieldtwo + ', ' + fieldthree + ', ' + fieldfour + ', ' + fieldfive + ''.replace(/\r\n/g, '\n').split('\n'));
});
$('#promotion_custom_field_3').bind("keyup change", function() {
//Create Global Variable for Text entered
fieldtwo = $(this).val();
//Add Global Variable to Hidden Field
$('#promotion_custom_field_7').val(fieldtwo);
//Update Description Field if Changed
$('#promotion_image_description').html('' + fieldone + ' walked through The Fair, after enjoying the Superdogs show where he saw lots of '
+ fieldtwo + ', ' + fieldthree + ' dogs. They leapt through hoops and over jumps and '
+ fieldfour + ' with their trainers. He thought about how great it would be if his dog '
+ fieldfive + ' became a Superdog! Maybe one day...\r\n\r\n Submitted Words: ' + fieldone + ', ' + fieldtwo + ', ' + fieldthree + ', ' + fieldfour + ', ' + fieldfive + ''.replace(/\r\n/g, '\n').split('\n'));
});
$('#promotion_custom_field_4').bind("keyup change", function() {
//Create Global Variable for Text entered
fieldthree = $(this).val();
//Add Global Variable to Hidden Field
$('#promotion_custom_field_8').val(fieldthree);
//Update Description Field if Changed
$('#promotion_image_description').html('' + fieldone + ' walked through The Fair, after enjoying the Superdogs show where he saw lots of '
+ fieldtwo + ', ' + fieldthree + ' dogs. They leapt through hoops and over jumps and '
+ fieldfour + ' with their trainers. He thought about how great it would be if his dog '
+ fieldfive + ' became a Superdog! Maybe one day...\r\n\r\n Submitted Words: ' + fieldone + ', ' + fieldtwo + ', ' + fieldthree + ', ' + fieldfour + ', ' + fieldfive + ''.replace(/\r\n/g, '\n').split('\n'));
});
$('#promotion_custom_field_17').bind("keyup change", function() {
//Create Global Variable for Text entered
fieldfour = $(this).val();
//Add Global Variable to Hidden Field
$('#promotion_custom_field_9').val(fieldfour);
//Update Description Field if Changed
$('#promotion_image_description').html('' + fieldone + ' walked through The Fair, after enjoying the Superdogs show where he saw lots of '
+ fieldtwo + ', ' + fieldthree + ' dogs. They leapt through hoops and over jumps and '
+ fieldfour + ' with their trainers. He thought about how great it would be if his dog '
+ fieldfive + ' became a Superdog! Maybe one day...\r\n\r\n Submitted Words: ' + fieldone + ', ' + fieldtwo + ', ' + fieldthree + ', ' + fieldfour + ', ' + fieldfive + ''.replace(/\r\n/g, '\n').split('\n'));
});
$('#promotion_custom_field_18').bind("keyup change", function() {
//Create Global Variable for Text entered
fieldfive = $(this).val();
//Add Global Variable to Hidden Field
$('#promotion_custom_field_37').val(fieldfive);
//Update Description Field if Changed
$('#promotion_image_description').html('' + fieldone + ' walked through The Fair, after enjoying the Superdogs show where he saw lots of '
+ fieldtwo + ', ' + fieldthree + ' dogs. They leapt through hoops and over jumps and '
+ fieldfour + ' with their trainers. He thought about how great it would be if his dog '
+ fieldfive + ' became a Superdog! Maybe one day...\r\n\r\n Submitted Words: ' + fieldone + ', ' + fieldtwo + ', ' + fieldthree + ', ' + fieldfour + ', ' + fieldfive + ''.replace(/\r\n/g, '\n').split('\n'));
});
});
</script>
答案 0 :(得分：1)
尝试使用此复选框更改事件
$(document).ready(function(){
$("input[type=checkbox]").change(function(){
if($(this).is(":checked")){
alert("Checked");
//$(this).siblings("input[type=checkbox]").removeAttr("checked");
}else{
alert("Unchecked")
}
});
});
答案 1 :(得分：1)
遇到同样的问题并看到了这篇文章。
由于我只是在进行测试，所以我决定将点击调用放在复选框上：
<input id="chk_selected" name="chk_selected" type="checkbox"
value="@x.GetValue("pic_pk_Idx_n")" onclick="clickchange(this)" />
所以我想说如果你有这个问题，请使用它。
但是，重要的是找出以下几行存在问题的原因：
$('#chk_selected').change(function () {
$('#chk_selected').on("click", function (event) {
请注意，这可能是一个jQuery版本问题（我在AJAX调用中遇到了这个问题）。