- How to Javascript change Label value from selecting Checkbox and drop-down list
- <input type="checkbox" name="events" value="event02 />
- Event 01
- </input>
- <br/>
- <input type="checkbox" name="events" value="event02 />
- Event 02:
- <select name="selectOne" onchange="amount()">
- <option value="00" selected="selected">00</option>
- <option value="01">01</option>
- <option value="02">02</option>
- <option value="03">03</option>
- <option value="04">04</option>
- <option value="05">05</option>
- <option value="06">06</option>
- <option value="07">07</option>
- </select>
- <br/>
- <input type="text" name="displayTxtBox" id="displayTxtBox" size="10" maxlength="50" value="" />
- <input type="checkbox" id="input1" name="events" value="event01" />
- <label for="input1">Event 01</label>
- <br/>
- <input type="checkbox" id="input2" name="events" value="event02" />
- <label for="input2">Event 02</label>
- <select name="selectOne">
- <option value="00" selected="selected">00</option>
- <option value="01">01</option>
- <option value="02">02</option>
- <option value="03">03</option>
- <option value="04">04</option>
- <option value="05">05</option>
- <option value="06">06</option>
- <option value="07">07</option>
- </select>
- <br/>
- <input type="text" name="displayTxtBox" id="displayTxtBox" size="10" maxlength="50" value="" />
- function showAmount(el, selectEl, targetEl, clearOnUncheck) {
- /* the following is an optional, Boolean, variable, so a ternary
- conditional is used, which checks that 'clearOnUncheck' exists,
- if it does then the variable is assigned its own value,
- if *not* then it's explicitly assigned the value of false
- note it's Boolean, *not* a string: don't quote this value */
- var clearOnUncheck = clearOnUncheck ? clearOnUncheck : false;
- if (!el || !selectEl || !targetEl) {
- // sanity checking, these are *required* arguments for the function
- return false;
- }
- // if the checkbox is checked, continue
- else if (el.checked) {
- /* assigning the conditions I'm testing to variables, so if conditions
- change they only have to be changed in one place */
- var index = selectEl.selectedIndex,
- textcontent = (typeof(el.textContent) != 'undefined');
- if (textcontent) {
- // up-to-date browsers
- /* sets the value of the text-input to be the string contained
- within the selected option from the select element */
- targetEl.value = selectEl
- .getElementsByTagName('option')[index]
- .textContent;
- }
- else if (window.innerText) {
- // IE < 8
- // as above, but uses innerText for IE
- targetEl.value = selectEl
- .getElementsByTagName('option')[index]
- .innerText;
- }
- }
- /* if the checkbox is unchecked, and you've set the Boolean for the
- optional clearOnUncheck to true (remember, *not* a string, don't quote) */
- else if (!el.checked && clearOnUncheck) {
- /* if clearOnUncheck is true, the value is cleared from the text-input,
- if clearOnUncheck is set to false, or not-set, the text-box value
- persists after unchecking the checkbox */
- targetEl.value = '';
- }
- }
- // references to the elements
- var input2 = document.getElementById('input2'),
- select = document.getElementsByName('selectOne')[0],
- textInput = document.getElementById('displayTxtBox');
- // binding the function to the onchange event of the input2 and selectOne elements.
- input2.onchange = function() {
- showAmount(input2, select, textInput, true);
- };
- select.onchange = function() {
- /* because the clearOnUncheck argument depends on the changing of the
- checkbox there's no point in passing it to the showAmount() function
- in the select's onchange event-handler */
- showAmount(input2, select, textInput);
- };