当第二个选择值发生变化时，选中第一个fancybox的复选框 [英] check checkbox on first fancybox when select value changes on second one

问题描述

我有两个fancybox对话框，当我点击复选框标签的第二个对话框打开时，在一个对话框中。

我想要的是在第二个对话框中选择值被更改，然后在第一个对话框复选框应该被选中。

这是我试过的代码：

 <$ （$ {
 src：'< div class = \'col） -md-3 \'>< div class =checkbox checkbox-successonclick =javascript：get（this）;>'+ 
'< input id =checkbox1type = checkboxclass =stylevalue =onclick =>'+ 
'< label for =checkbox1>< a data-fancybox-next class =button-next href =＃> ONE< / a>< / label>'+ 
'< / div>< / div>'，
类型：'html'，
 smallBtn：true 
}]）; 
}）; 
 
 this.get = function（t）{
 //$(t).find('input#checkbox1').attr('checked'，true）; 
 $ .fancybox.open（[{
 src：'< div class =col-md-3>< div class =checkbox checkbox-success>< select onchange ='\''+ t +'\'.find（\'input＃checkbox1 \'）。attr（\'checked'\\'，true）;>< option value =Unclassified > False< / option>< option value => true< / option>< / select>< / div>< / div>'，
类型：'html'，
 smallBtn：false 
}]）; 
} 
  

请注意，我想像上面那样手动打开fancybox。

任何帮助表示赞赏。谢谢。

CodePen

p>

解决方案

使用内联JS代码是一种不好的做法。只需创建对象，绑定事件，然后显示：

  var $ src = $（'< div class =col-md -3>>< div class =checkbox checkbox-success>< select>< option value =0> False< / option>< option value =1>选项>< /选择>< / DIV>< / DIV>'）; $（'＃checkbox1'）。prop（'checked'，this.value = $'$'$'$'$'$'$'$'$'$' = 1？true：false）; 
}）; 
 
 $ .fancybox.open（{
 src：$ src，
类型：'html'，
 smallBtn：true，
 toolbar：false 
}）; 
  

https://codepen.io/anon/pen/WXNLmX?editors=1010

I have two fancybox dialog, on one dialog when I click on checkbox label second dialog is opened.

What I want is on second dialog when select value is changed then on first dialog checkbox should be checked.

How can I achieve this ?

Here is my code that I tried:

$("#fancybox-manual-c").click(function() {
    $.fancybox.open([{
        src : '<div class=\'col-md-3\'><div class="checkbox checkbox-success" onclick="javascript:get(this);">'+
'<input id="checkbox1" type="checkbox" class="styled" value="" onclick=""> '+
'<label for="checkbox1"><a data-fancybox-next class="button-next" href="#">ONE</a></label>'+
'</div></div>',
        type : 'html',
        smallBtn : true
   }]);
});

this.get = function(t){
     //$(t).find('input#checkbox1').attr('checked', true);
     $.fancybox.open([{
        src: '<div class="col-md-3"><div class="checkbox checkbox-success"><select onchange="\''+t+'\'.find(\'input#checkbox1\').attr(\'checked\', true);"><option value="Unclassified">False</option><option value="">true</option></select></div></div>',
        type : 'html',
        smallBtn : false
    }]);
}

Please note that I want to open fancybox manually like above.

Any help is appreciated. thanks.

CodePen

解决方案

It is a bad practice to use inline JS code. Simply create object, bind events and then display:

var $src = $('<div class="col-md-3"><div class="checkbox checkbox-success"><select><option value="0">False</option><option value="1">true</option></select></div></div>');

$src.find('select').on('change', function() {
  $('#checkbox1').prop('checked', this.value == 1 ? true : false);
});

$.fancybox.open({
  src  : $src,
  type : 'html',
  smallBtn : true,
  toolbar  : false
});

https://codepen.io/anon/pen/WXNLmX?editors=1010

这篇关于当第二个选择值发生变化时，选中第一个fancybox的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！