modal and checkbox html5

I have modal and I also have a simple checkbox action. when the checkbox is checked, I want to create a <input type="text" value="selected value"> after event checked is completed.
When the checkbox is unchecked, it will remove the <input type="text" value="selected value">

Can you show me how to do that?

<form>
<div id="optionalArea">

</div>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                   <div class="row with-forms  margin-top-0">
                    <h4 class="headline margin-top-10 margin-bottom-10">Table</h4>
                       <button type="button" style="float:left;" class="btn btn-default" data-dismiss="modal">Close</button>
                    <table class="basic-table">
                        <tr>
                            <th>Description</th>
                            <th>Cost</th>
                            <th>Count</th>
                            <th>Total</th>
                            <th>Action</th>
                        </tr>
                        <tr>
                            <th colspan="3" style="background-color:white;text-align:right;color:black;vertical-align:central;">Sub Total:</th>
                            <th style="background-color:white;"><input type="text" value="0" id="subTotal" /></th>
                            <th style="background-color:white;"></th>
                        </tr>
                        @{
                            DomainController.Motorhome mh = new DomainController.Motorhome();
                            foreach (Domain.FleetFee item in mh.FleetFeeList("1", "Active"))
                            {                                 
                        <tr>                         
                        <td>@item.feeDescription</td>
                        <td>$@item.cost @item.typeUnit</td>
                        <td>
                            <input type="hidden" value="@item.cost" id="cost_@item.feeId" />
                            <input type="text" maxlength="2" 
                                   oninput="CalItemSubTotal('cost_@item.feeId','count_@item.feeId','subTotal_@item.feeId')" id="count_@item.feeId" 
                                   value="1" />
                        </td>
                        <td><input type="text" id="subTotal_@item.feeId" readonly /></td>
                        <td><input 
                                   type="checkbox" 
                                   id="itemSelect_@item.feeId"
                                   onclick="CalSubTotal('subTotal_@item.feeId','itemSelect_@item.feeId','count_@item.feeId')"
                                   />
                        </td>
                        </tr>
                        }
                        }
                    </table>
                </div>
             </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
<script>
    function CalItemSubTotal(cost, count, destination) {
        //alert(document.getElementById(count).value + ' ' + document.getElementById(cost).value);
        var costValue = parseFloat(document.getElementById(cost).value)
        var countValue = parseInt(document.getElementById(count).value);
        var total = parseFloat(costValue * countValue).toFixed(2);
        document.getElementById(destination).value = total;
        //alert("Total " + total + '  '  + costValue + ' ' + countValue);
    }
    function CalSubTotal(itemTotalValue, itemCheckBox, itemCountValue) {
        var itemValue = parseFloat(document.getElementById(itemTotalValue).value);
        if(document.getElementById(itemCheckBox).checked==true)
        {
            //alert("Checked: " + itemValue);
            document.getElementById("subTotal").value = parseFloat(parseFloat(document.getElementById("subTotal").value) + itemValue).toFixed(2);
            document.getElementById(itemCountValue).readOnly = true;
            document.getElementById(itemCountValue).style.backgroundColor = "#DCDCDC";

            document.getElementById("optionalArea").innerHTML = document.getElementById("optionalArea").innerHTML +
            (document.getElementById(itemTotalValue).value + " x " + document.getElementById(itemCountValue).value) + "<br>";
        }
        else
        {
            //alert("Unchecked: " + itemValue);
            document.getElementById("subTotal").value = parseFloat(parseFloat(document.getElementById("subTotal").value) - itemValue).toFixed(2);
            document.getElementById(itemCountValue).readOnly = false;
            document.getElementById(itemCountValue).style.backgroundColor = "white";
        }
        document.getElementById("subTotal").value = parseFloat(document.getElementById("subTotal").value).toFixed(2);
    }
</script>
</form>

Open in new window

LVL 1
ITsolutionWizardAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Sample HTML
<input type="checkbox" id="makeinput" name="test" value="Check Box Value" class="make-input"> Click
<div id="target"></div>

Open in new window

JavaScript
<script>
var target = document.getElementById('target');
document.getElementById('makeinput').addEventListener('change', function() {
  if (!this.checked) {
    target.innerHTML = '';
  }
  else {
    var inp = document.createElement('input')
    inp.type = 'text';
    inp.value = this.value;
    target.appendChild(inp);
  }
});
</script>

Open in new window

You can see it working here
Zakaria AcharkiAnalyst DeveloperCommented:
Not sure where you want to add this input field, but since you already have a click event attached I suggest to add the logic in your callback function "CalSubTotal()" like :

function CalSubTotal(itemTotalValue, itemCheckBox, itemCountValue) {
  var itemValue = parseFloat(document.getElementById(itemTotalValue).value);
  var self = event.target;
  
  if (self.checked == true) {
    //Your current calculation logic HERE

    var new_input = document.createElement('input');
    new_input.type = 'text';
    self.parentNode.insertBefore(new_input, self);
  } else {
    //Your current calculation logic HERE

    self.parentNode.firstChild.remove();
  }
}

Open in new window


Working sample that adds the input just before the clicked checkbox

If you want to place the new input in another position just let me know so I will adjust it for you.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ITsolutionWizardAuthor Commented:
juian

your codes won't work to me because I will have more than 1 check box. when the one of the check boxes is unchecked
only one row of record will be removed, not the whole things
Julian HansenCommented:
Can you show us your rendered code - Browser HTML. It will be easier to modify that.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.