Ho creato questo script, ma quando clicco sul primo checkbox mi cambia anche il valore del secondo pur non essendo cekkato.

Vorrei, o renderli indipendenti, oppure con un checked ottenere il check di tutti i check nella pagina.

Mi aiutate a trovare una soluzione ?


codice:
 
<!DOCTYPE html>
<!--[if IE 8]> <html lang="it" class="ie8"> <![endif]-->  
<!--[if IE 9]> <html lang="it" class="ie9"> <![endif]-->  
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->  


<head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>


 
   <script>
$(document).ready(function () {
     $('#txt').val($(this).is(':checked'));
    $('#txt').val('€ 45,00 /mese');
    
    $('input[type=checkbox]').click(function(){
       if ($('input[type=checkbox]').is(':checked')) {
        $('#txt').val('€ 53,54 /mese');
    }
    else{
        $('#txt').val('€ 45,00 /mese');
    }
    });
   
});
</script> 
 <script>
$(document).ready(function () {
     $('#txt2').val($(this).is(':checked'));
    $('#txt2').val('€ 10,00 /mese');
    
    $('input[type=checkbox]').click(function(){
       if ($('input[type=checkbox]').is(':checked')) {
        $('#txt2').val('€ 18,54 /mese');
    }
    else{
        $('#txt2').val('€ 10,00 /mese');
    }
    });
   
});
</script> 


</head>








<body>
 
   <div class="col-md-6 text-center">
                        <div class="thumbnails thumbnail-style">
                            <span> <i class="fa fa-desktop color-blue" style="font-size:40px;"></i> &nbsp; <i class="fa fa-plus color-dark" style="font-size:20px;"></i> &nbsp; <i class="glyphicon glyphicon-phone-alt color-orange" style="font-size:35px;"></i>     </span>
                            
                            <div class="caption">
                                <h2  class="btn-u btn-u-xs bg-color-aqua" style="font-size:16px;"><strong>Pizza Light</strong></h2>
    <h1 class="text-left"> <span class="color-blue" >      
     


<style type="text/css">
input {border:none;}
</style>
  
    <strong><input class="text-center stile_2" id="txt" type="text" value="txt"> </strong> </h1>
    <h5 class="pull-center color-grey">iva inclusa</h5>
     
     <h5><input type="checkbox" id="txt" name="txt" value="Opzione Business"><label>&nbsp; piccante</label></h5>
 
     </div></div></div>
    
    <hr>
    <!------- test checkbox ------------->
 
<div class="col-md-6 text-center">
                        <div class="thumbnails thumbnail-style">
                            <span> <i class="fa fa-desktop color-blue" style="font-size:40px;"></i> &nbsp; <i class="fa fa-plus color-dark" style="font-size:20px;"></i> &nbsp; <i class="glyphicon glyphicon-phone-alt color-orange" style="font-size:35px;"></i></span>
                            
                            <div class="caption">
                                <h2  class="btn-u btn-u-xs bg-color-aqua" style="font-size:16px;"><strong>Pizza Style</strong></h2>
    <h1 class="text-left"> <span class="color-blue" >      
 
 
 <strong><input class="text-center stile_2" id="txt2" type="text" value="txt2"> </strong> </h1>
    <h5 class="pull-center color-grey">iva inclusa</h5>
     
     <h5><input type="checkbox" id="txt2" name="txt2" value="piccante"><label>&nbsp; piccante</label></h5>
 
      </div></div></div>
</body>


</html>