0

私は少し助けを得ることができるかどうか疑問に思っていました. 3 つのチェックボックスがあり、各チェックボックスの前にテキストをユーザーに表示したいと考えています。

<form id="extras" onchange="calculate()">
    option 1<input type="checkbox" name="box" value="2000" id="snow" onchange="calculate()" checked><br>
    option 2<input type="checkbox" name="box" value="500" id="water" onchange="calculate()" checked><br>
    option 3<input type="checkbox" name="box" value="150" id="air" onchange="calculate()"><br><br>
</form>

したがって、オプション 1 とオプション 2 の両方が選択されている場合は、オプション 1 とオプション 2 を選択したと言えます。innerHTML を使用してドロップダウンでこれを行うことができましたが、チェックボックスでこれを達成する方法がわかりません。どうすればこれを行うことができるかについてのアイデアはありますか? アドバイスをありがとう。

4

2 に答える 2

1

HTML

<form id="extras">
    <label id="lbl_1">option 1</label><input type="checkbox" name="box" value="2000" id="1" onchange="calculate()"><br>
        <label id="lbl_2">option 2</label><input id="2" type="checkbox" name="box" value="500" onchange="calculate()"><br>
        <label id="lbl_3">option 3</label><input type="checkbox" name="box" value="150" id="3" onchange="calculate()"><br><br>
</form>
        <span id="txt"></span>

計算機能

function calculate()
    {
        document.getElementById("txt").innerHTML = "";
      var checkBoxes = document.getElementsByName("box");
      for(var i=0; i < checkBoxes.length;i++)
      { 
          if(checkBoxes[i].checked)
          {           
document.getElementById("txt").innerHTML += document.getElementById("lbl_" checkBoxes[i].id).innerHTML
          }
      }

    }

そしてJsFiddle

于 2013-06-12T21:27:09.100 に答える
0

どうぞ。これはjQueryで書きましたが、vanilla JSに変換できます。

http://jsfiddle.net/P2BfF/

基本的に、チェックボックスのラベルを作成する必要があります:

<label for='snow'>option 1</label>

次に、チェックに基づいて、その要素の innerHTML を表示できます。

これが私のJSです：

    var checkboxes = $('#extras').find('input[type=checkbox]');

checkboxes.on('click',function() {
    var selected = [];
    checkboxes.each(function(idx,item) {

        if (item.checked)
           selected.push( $('label[for="' + item.id + '"]').html() );
    });

    return alert(selected);
});
于 2013-06-12T21:31:44.417 に答える