Как вывести несколько значений сразу в popup окне

209

13 марта 2018, 01:51

Здравствуйте. Есть код в котором при выборе чекбокса, его значение выводиться в popup окне. Как сделать так чтобы передавались значения нескольких чекбоксов?

    <body>
    <label for="first">1 вариант</label><input type="checkbox" id="first" name="box" class="box">
    <label for="second">2 варинат</label><input type="checkbox" id="second" name="box2" class="box2">
    <label for="third">3 вариант</label><input type="checkbox" id="third" name="box3" class="box3">
    <a href="#" class="link">Жамкни меня</a>
    <div id="wrap"></div>
    <div id="window">
    <img class="close" onclick="show('none')" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/close.png">        
        <form action="send.php" id="send">  
        </form>     
    </div>
    <script type="text/javascript">
(function($) {    
        $('.box').change(function(){
            if ($('#first').is( ":checked" )){
                $('#send').html( "<p>All new content. <em>First!</em></p>" );
            }  
        })
        $('.box2').change(function(){
            if ($('#second').is( ":checked" )){
                $('#send').html( "<p>All new content. <em>Second!</em></p>" );
            }
        })
        $('.box3').change(function(){
            if ($('#third').is( ":checked" )){
                $('#send').html( "<p>All new content. <em>Third!</em></p>" );
            } 
        })
        $('.link').click(function(){
            $('#wrap, #window').show();
        })
        $('.close').click(function(){
            $('#wrap, #window').hide();
        })
        })(jQuery);
    </script>
</body>

Answer 1

(function($) { 
  $('.box').change(function() { 
    setChecked(); 
  }) 
  $('.box2').change(function() { 
    setChecked(); 
  }) 
  $('.box3').change(function() { 
    setChecked(); 
  }) 
 
  $('.link').click(function() { 
    $('#wrap, #window').show(); 
  }) 
  $('.close').click(function() { 
    $('#wrap, #window').hide(); 
  }) 
 
  var setChecked = function() { 
    var html = ''; 
    if ($('#first').is(":checked")) 
      html += "<p>All new content. <em>First!</em></p>"; 
    if ($('#second').is(":checked")) 
      html += "<p>All new content. <em>Second!</em></p>"; 
    if ($('#third').is(":checked")) 
      html += "<p>All new content. <em>Third!</em></p>"; 
    $('#send').html(html); 
  } 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<label for="first">1 вариант</label><input type="checkbox" id="first" name="box" class="box"> 
<label for="second">2 варинат</label><input type="checkbox" id="second" name="box2" class="box2"> 
<label for="third">3 вариант</label><input type="checkbox" id="third" name="box3" class="box3"> 
<a href="#" class="link">Жамкни меня</a> 
<div id="wrap"></div> 
<div id="window"> 
  <img class="close" onclick="show('none')" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/close.png"> 
  <form action="send.php" id="send"> 
  </form> 
</div> 
<script type="text/javascript"> 
</script>