vendredi 3 mars 2017

jQuery : displaying a message when some radio buttons are selected and others are not

I just wrote a jQuery code for a form so when the user is switching Names (see the snippet), if there was a selection made for the Car , it is reset, while the Transmission selection remains (if a radio button was selected).

Now I would like to display the message in <div class="formalertmsg">Please select a car.</div> if when switching Names , a Transmission is selected, and Car is NOT selected. Otherwise, it should be hidden. Here's my code so far:

var nameRadio = $(".radio-838 input") ;
var carRadio = $(".radio-839 input") ;
var transmissionRadio = $(".radio-60 input");


//Reset the Car selection when a change has been made on the Name
                function carInit() {
                                carRadio.prop("checked", false);
                }
                nameRadio.on("change", carInit);

// Alert msg when no Car is selected and a Transmission is selected
                function checkCar (){
                        if(transmissionRadio.is(":checked") && carRadio.not(":checked")){
                                $(".formalertmsg").show();
                        }
                        else{
                                $(".formalertmsg").hide();
                        }
                }
                nameRadio.on("change", checkCar);
        carRadio.on("change", checkCar);
    

$(window).on('load', checkCar );
<script src="http://ift.tt/1oMJErh"></script>
<div class="formel" id="formtde">
  <h3>Name</h3>
  <p>
  <span class="radio-838">
                <span class="first">
                        <label>
                                <input type="radio" name="radio-838" value="JOHN">
                                <span>JOHN</span>
      </label>
                </span>
                <span class="last">
                        <label>
                                <input type="radio" name="radio-838" value="BOBBY">
                                <span>BOBBY</span>
                        </label>
                </span>
        </span>
        </p>
</div>

<div class="formel" id="formgec">
        <h3>Car</h3>
        <p>
        <span class="radio-839">
                        <span class="first">
                                <label>
                                        <input type="radio" name="radio-839" value="FORD">
                                        <span>FORD</span>
                                </label>
                        </span>
                                <label>
                                        <input type="radio" name="radio-839" value="CHEVROLET">
                                        <span>CHEVROLET</span>
                                </label>
                                <label>
                                        <input type="radio" name="radio-839" value="PORSCHE">
                                        <span>PORSCHE</span>
                                </label>
                                <label>
                                        <input type="radio" name="radio-839" value="NISSAN">
                                        <span>NISSAN</span>
                                </label>
        </span>
        </p>
    <div class="formalertmsg">
Please select a car.
  </div>
</div>
<div class="formel">
  <h3>Transmission</h3>
  <p>
  <span class="radio-60">
                <span class="first">
                        <label>
                                <input type="radio" name="radio-60" value="MANUAL">
                                <span>MANUAL</span>
      </label>
                </span>
                <span class="last">
                        <label>
                                <input type="radio" name="radio-60" value="AUTO">
                                <span>AUTO</span>
                        </label>
                </span>
        </span>
        </p>
</div>

The message triggers correctly but it won't disappear when the user selects a Car although I'm triggering the checkCar function with carRadio.on("change", checkCar);. Can someone please explain to me why? And help me correct this without rewriting all my code from scratch? Thank you, Kim.

Aucun commentaire:

Enregistrer un commentaire