mercredi 16 mars 2016

JavaScript/jQuery: Validate Checkbox & Dropdown Pairing

I'm teaching myself JavaScript/jQuery. I have three pairs of checkboxes and dropdowns I want to validate:

code screencap

I want to validate that both parts of a pair are selected:

-- If a checkbox is checked, a value is also selected from the associated dropdown

-- Or, if a value is selected from a dropdown, the associated checkbox must be checked

I don't want to enable/disable the checkbox or dropdown during the process. I want to allow the user to check/select what they will, then check to see if both parts of a given pair are checked and selected on submit.

JSFiddle for the HTML: http://ift.tt/1Z3gxAl

I spent a few hours on SO and googling in general, but couldn't find an example quite like this. Thanks ahead of time for any help.

<div>
  <input type="checkbox">Vehicle 1
  <select>
    <option>Car</option>
    <option>Truck</option>
    <option>Van</option>
    <option>Motorcycle</option>
  </select>
</div>

<div>
  <input type="checkbox">Vehicle 2
  <select>
    <option>Car</option>
    <option>Truck</option>
    <option>Van</option>
    <option>Motorcycle</option>
  </select>
</div>

<div>
  <input type="checkbox">Vehicle 3
  <select>
    <option>Car</option>
    <option>Truck</option>
    <option>Van</option>
    <option>Motorcycle</option>
  </select>
</div>

<br /><br />
<button>submit data</button>




Aucun commentaire:

Enregistrer un commentaire