如果选中复选框，如何自动粘贴值

时间：2017-06-08 12:48:17

标签： javascript

我想要一个功能，如果选中了复选框，我有一个带复选框i的列表我想将所选值粘贴到文本字段中。enter image description here

上图中出现的东西。

编辑：

<table id="userTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Order Id</th>
                <th>Order Proposed Id</th>
                <th>Order Proposed Date</th>
                <th>Store Id</th>
                <th>Select</th>
            </tr>
        </thead>
        <tbody>
        <%for(Order orderSList:orderList){ %>
            <tr>
                <td><%=orderSList.getOrderId()%></td>
                 <td><%=orderSList.getOrderProposedId()%></td>
                 <td><%=orderSList.getOrderProposedDate()%></td>
                 <td><%=orderSList.getStoreId()%></td>
                 <td><input type="checkbox" name="<portlet:namespace/>notSubmitList" value="<%=orderSList.getOrderId()%>" class="case" /></td>
            </tr>
          <%} %>
        </tbody>
    </table>
 <script>

3 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
var selectedValue = function(id, _this){
  var checkboxes = document.getElementsByClassName('selectedIN');
  
  for (var i = 0; i < checkboxes.length; i++) {
    if(_this != checkboxes[i]){
      checkboxes[i].checked = false;
    }      
  }
  if(_this.checked){
    document.getElementById('result').innerHTML =       document.getElementById(id).value;
  }else{
     document.getElementById('result').innerHTML = '';
}
  }
＆＃13; 
input:-moz-read-only { /* For Firefox */
    background-color: none;
    border:none;
}

input:read-only { 
    background-color: none;
    border:none;
}
＆＃13; 
<table id="userTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Order Id</th>
                <th>Order Proposed Id</th>
                <th>Order Proposed Date</th>
                <th>Store Id</th>
                <th>Select</th>
            </tr>
        </thead>
        <tbody>
          <tr>
              <td>1001</td>
              <td>
                <input type="text" value="123" readonly="true" id="opID_1"/>
              </td>
               <td>Order Proposed Date</td>
                <td>Store Id</td>
              <td>
                <input type='checkbox'  onchange="selectedValue('opID_1',this)" class="selectedIN"/>
              </td>
          </tr>
          <tr>
            <td>5555</td>
            <td>
              <input type="text" value="456" readonly="true" id="opID_2"/>
            </td>
             <td>Order Proposed Date</td>
              <td>Store Id</td>
            <td>
              <input type='checkbox' onchange="selectedValue('opID_2',this)" class="selectedIN"/>
            </td>
        </tr>
        <tr>
            <td>5555</td>
            <td>
              <input type="text" value="789" readonly="true" id="opID_3"/>
            </td>
             <td>Order Proposed Date</td>
              <td>Store Id</td>
            <td>
              <input type='checkbox' onchange="selectedValue('opID_3',this)" class="selectedIN"/>
            </td>
        </tr>
        <tr>
            <td>5555</td>
            <td>
              <input type="text" value="999" readonly="true" id="opID_4"/>
            </td>
             <td>Order Proposed Date</td>
              <td>Store Id</td>
            <td>
              <input type='checkbox' onchange="selectedValue('opID_4',this)" class="selectedIN"/>
            </td>
        </tr>
</table>
<div class='selected_values'>
  <strong>Selected Value: <span id="result"></span></strong>
</div>
        </tbody>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您可以使用Jquery的onchange功能检测是否选中了复选框。之后，您只需使用parent和find函数选择其订单建议ID。

我将Jquery 2.1.1添加到下面的代码段中。 

$("input").on("change",function(){
  var thiz = $(this);
  
  if(thiz.is(':checked')){
    var value = thiz.parent().parent().find("td:nth-child(2)").text();
  
    $(".selected_values span").text(value);
  }
  else{
    $(".selected_values span").text("");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1'>
  <tr>
    <th>Order Id</th>
    <th>Order Proposal Id</th>
    <th>Order Proposal Date</th>
    <th>Store Id</th>
    <th>Store Id</th>
  </tr>
  <tr>
    <td>2</td>
    <td>1001</td>
    <td>2016-10-21</td>
    <td>1709</td>
    <td>
      <input type='checkbox'/>
    </td>
  </tr>
  <tr>
    <td>10</td>
    <td>82715421</td>
    <td>2017-05-22</td>
    <td>525</td>
    <td>
      <input type='checkbox'/>
    </td>
  </tr>
  <tr>
    <td>11</td>
    <td>82715422</td>
    <td>2016-12-31</td>
    <td>525</td>
    <td>
      <input type='checkbox'/>
    </td>
  </tr>
</table>
<div class='selected_values'>
  <strong>Selected Value: <span></span></strong>
</div>

纯Javascript解决方案 

var value_span = document.getElementById("selected_value");

function printSelectedValue(e, selected_value){
  if (e.checked) {
      value_span.textContent = selected_value;
    }
    else{
      value_span.textContent = "";
    }
}
<table border='1'>
  <tr>
    <th>Order Id</th>
    <th>Order Proposal Id</th>
    <th>Order Proposal Date</th>
    <th>Store Id</th>
    <th>Store Id</th>
  </tr>
  <tr>
    <td>2</td>
    <td>1001</td>
    <td>2016-10-21</td>
    <td>1709</td>
    <td>
      <input type='checkbox' onChange="printSelectedValue(this,'1001')"/>
    </td>
  </tr>
  <tr>
    <td>10</td>
    <td>82715421</td>
    <td>2017-05-22</td>
    <td>525</td>
    <td>
      <input type='checkbox' onChange="printSelectedValue(this,'82715421')"/>
    </td>
  </tr>
  <tr>
    <td>11</td>
    <td>82715422</td>
    <td>2016-12-31</td>
    <td>525</td>
    <td>
      <input type='checkbox' onChange="printSelectedValue(this,'82715422')"/>
    </td>
  </tr>
</table>
<div>
  <strong>Selected Value: <span id='selected_value'></span></strong>
</div>

答案 2 :(得分：0)

var inputs = [].slice.call(document.querySelectorAll("#userTable input[type=checkbox]"));

function generateText() {
  return inputs.reduce(function(builtList, input) {
    if (input.checked) {
      return builtList.concat(input.value);
    }
    return builtList;
  }, []).join();
}

var textarea = document.querySelector("textarea");
inputs.forEach(function(input) {
  input.addEventListener("click", function() {
    textarea.value = generateText();
  });
});

最好使用更好的方式（例如document.getElementById()）来选择文本区域，但是您没有在代码中包含它，所以我不知道它的ID

相关问题
最新问题