0

2 つのチェックボックスがあり、そのうちの 1 つに 5 つの要素を持つドロップダウン リストが含まれています。

  • チェックボックスA
  • チェックボックス B: ドロップダウン リスト
  • テキストボックス

最初にチェックボックス B がチェックされているかどうかを確認する必要があります。次に、テキストボックスのみが値を表示できます。それ以外の場合は空です。次に、チェックボックス B がオンになっていて、ドロップダウン リストから値が選択されている場合、テキストボックスは変更時にすぐに値を表示する必要があります。

<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="" />

チェックボックスBが検出され、選択されたドロップダウンリストがテキストボックスに値のみを表示することを検出するコードをJavascriptで記述する方法がわかりません。

onChange と Javascript の関数が必要だと思います。

よろしくお願いします。

4

1 に答える 1

1

idさまざまなフォーム要素に追加のクリック ターゲットを提供するための属性とlabel要素が追加された、修正された HTML が与えられます。

<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="" />​

次の JavaScript は意図したとおりに機能しているように見えますが、私はあなたの意図を完全には確信していませんでした:

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);
};​

JS Fiddle デモclearOnUncheck == true

JS Fiddle デモclearOnUncheck == false

clearOnUncheck設定されていないJS Fiddle デモ

参考文献:

于 2012-07-14T05:34:50.630 に答える