Comment changer l'image d'arrière-plan dynamiquement uniquement lorsque le bouton radio est sélectionné et en appuyant sur le bouton soumettre

Utiliser uniquement Javascript

Testez-le en ligne: http://jsfiddle.net/OscarGarcia/t70prkda/

Code de test HTML:

<form name="form" onsubmit="return check()"> <p><input type="radio" name="bg" value="no" /> Desactivate</p> <p><input type="radio" name="bg" checked="checked" value="yes" /> Activate</p> <input type="submit" /> </form> 

Code Javascript:

 function check() { if (document.form.bg.value == "yes") { document.body.style.background = "red"; } else { document.body.style.background = ""; } return false; } 

Modifier 1: Utilisation de jQuery

Testez-le en ligne: http://jsfiddle.net/OscarGarcia/t70prkda/1/

 function check() { if ($("#form input[name=bg]:checked").val() == "yes") { $('body').css('background', "red"); } else { $('body').css('background', ""); } return false; } 

Modifier 3: Modification de l'image d'arrière-plan dans JS et jQuery

Pour simplifier, mon code ne change que la couleur d'arrière-plan, celui-ci modifie l'image d'arrière-plan: http://jsfiddle.net/OscarGarcia/t70prkda/2/

 function check() { if ($("#form input[name=bg]:checked").val() == "yes") { $('body').css('background-image', "url(https://c2.staticflickr.com/8/7151/6717697085_6d28849226_z.jpg)"); } else { $('body').css('background', ""); } return false; } 

Et en javascript pur: http://jsfiddle.net/OscarGarcia/t70prkda/3/

 function check() { if (document.form.bg.value == "yes") { document.body.style.backgroundImage = "url(https://c2.staticflickr.com/8/7151/6717697085_6d28849226_z.jpg)"; } else { document.body.style.background = ""; } return false; } 

Edit 3: transition de l'image de fond lisse

Essayez-le en ligne: http://jsfiddle.net/OscarGarcia/2g6rfdsf/

Code CSS:

 body { height: 100%; } #overlay { position: absolute; top: 0px; left: 0px; padding: 0px; margin:0px; width: 100%; height: 100%; background: red url(http://thumbs.dreamstime.com/z/abstract-blue-tiled-background-5151518.jpg) -400px center; transition: all 2s ease-in-out; opacity: 0; z-index: -1; } 

Code HTML:

 <div id="overlay"></div> <form name="form" id="form" onsubmit="return check()"> <p><input type="radio" name="bg" value="no" /> Fade-out</p> <p><input type="radio" name="bg" checked="checked" value="yes" /> Fade-in</p> <input type="submit" /> </form> 

Notez que j'utilise une superposition (un div sur l'arrière-plan) avec l'opacité 0 (caché) et je vais animer l'opacité. Il n'est pas possible d'animer les changements d'image d'arrière-plan, ils changeront instantanément.

Et le code javascript (jQuery version):

 function check() { if ($("#form input[name=bg]:checked").val() == "yes") { $('#overlay'). css('opacity', '1'). css('background-position', '0px center'); } else { $('#overlay'). css('opacity', '0'). css('background-position', '-400px center'); } return false; } 

Lorsque vous appuyez sur la superposition d'arrière-plan du bouton, vous verrez ou vous cacherez en douceur parce que la transition: all 2s ease-in-out; code CSS transition: all 2s ease-in-out; Tandis que la position de gauche change lentement aussi!

J'espère que cela aide!

Vous voudrez utiliser jquery pour enregistrer l'événementHandler avec les deux actions.

Quelque chose comme:

 var backgroundHandler = function(){//whatever}; $('#radioWhatever').on('changed',backgroundHandler); $('#submitbtn').on('click', backgroundHandler);