2. Algorithm
  3. jquery - How to display a textbox onclick of a radiobutton which is checked using javascript? - Stack Overflow

jquery - How to display a textbox onclick of a radiobutton which is checked using javascript? - Stack Overflow

admin2025-04-19  0

I have an HTML as follows : 

<div class="col-lg-2 camt hidden">
    <label for="camt">CEAV Amount:</label>
</div>
<div class="col-lg-4 camt hidden radio">
    <label>
        <input type="radio" value="..xyz.." name="camt" id="camt1" required onclick="functions()" />XYZ</label>
    <hr/>
    <div class="row">
        <div class="col-lg-4">
            <label>
                <input type="radio" value="ABC" name="camt" id="camt2" required onclick="functions()" />ABC</label>
        </div>
        <div class="col-lg-8">
            <input type="number" class="form-control hidden popup1" onchange="functions()" id="textpart" placeholder="Enter value. Only numbers." required />
        </div>
    </div>
    <hr/>
    <label>
        <input type="radio" value="NA" name="camt" required id="camt3" onclick="functions()" />NA</label>
    <hr/>
</div>

I have a function editData() in javascript which sets the value of all my inputs on the screen. It also checks the radio button when the form is loaded. So, if the radio button camt2 is checked I want to display a textbox in front of it. But it is not working. The two functions editData() in which I want to check if the radio button is checked or not, and funcitons() which sets the textbox to be hidden or visible. both of them are below : editData()

function editData() {
    var logfromform = document.getElementById('logref').value;
    var key;
    for (key in Log1) {
        if (Log1[key].LogReference == logfromform) {

            if (Log1[key].RedemptionPrice == '100%') {
                document.getElementById('redprice1').checked = true;
                functions();
            } else if (Log1[key].RedemptionPrice == 'NA') {
                document.getElementById('redprice3').checked = true;
                functions();
            } else {
                document.getElementById('redprice2').checked = true;
                functions();
            }
        }
    }
}

functions()

function functions() {
    if (document.getElementById('camt2').checked) {
        $("#textpart").removeClass("hidden");
    } else {
        $("#textpart").addClass("hidden");
    }
}

When I run the HTML form, the JavaScript is being entered, but the removeclass doesn't work on the textbox Any help much appreciated! Please note that I am running Internet Explorer 11.0.9600 and NO I don't have an alternative browser to carry forward my work on.

I have an HTML as follows : 

<div class="col-lg-2 camt hidden">
    <label for="camt">CEAV Amount:</label>
</div>
<div class="col-lg-4 camt hidden radio">
    <label>
        <input type="radio" value="..xyz.." name="camt" id="camt1" required onclick="functions()" />XYZ</label>
    <hr/>
    <div class="row">
        <div class="col-lg-4">
            <label>
                <input type="radio" value="ABC" name="camt" id="camt2" required onclick="functions()" />ABC</label>
        </div>
        <div class="col-lg-8">
            <input type="number" class="form-control hidden popup1" onchange="functions()" id="textpart" placeholder="Enter value. Only numbers." required />
        </div>
    </div>
    <hr/>
    <label>
        <input type="radio" value="NA" name="camt" required id="camt3" onclick="functions()" />NA</label>
    <hr/>
</div>

I have a function editData() in javascript which sets the value of all my inputs on the screen. It also checks the radio button when the form is loaded. So, if the radio button camt2 is checked I want to display a textbox in front of it. But it is not working. The two functions editData() in which I want to check if the radio button is checked or not, and funcitons() which sets the textbox to be hidden or visible. both of them are below : editData()

function editData() {
    var logfromform = document.getElementById('logref').value;
    var key;
    for (key in Log1) {
        if (Log1[key].LogReference == logfromform) {

            if (Log1[key].RedemptionPrice == '100%') {
                document.getElementById('redprice1').checked = true;
                functions();
            } else if (Log1[key].RedemptionPrice == 'NA') {
                document.getElementById('redprice3').checked = true;
                functions();
            } else {
                document.getElementById('redprice2').checked = true;
                functions();
            }
        }
    }
}

functions()

function functions() {
    if (document.getElementById('camt2').checked) {
        $("#textpart").removeClass("hidden");
    } else {
        $("#textpart").addClass("hidden");
    }
}

When I run the HTML form, the JavaScript is being entered, but the removeclass doesn't work on the textbox Any help much appreciated! Please note that I am running Internet Explorer 11.0.9600 and NO I don't have an alternative browser to carry forward my work on.

  • javascript
  • jquery
  • html
  • twitter-bootstrap
Share Improve this question edited Aug 11, 2015 at 12:27 tpsaitwal asked Aug 11, 2015 at 11:45 tpsaitwaltpsaitwal 4221 gold badge6 silver badges25 bronze badges 4
  • 2 create jsfiddle with your code for better understanding – venkat7668 Commented Aug 11, 2015 at 11:52
  • $("input[type='radio']").is(":checked") should return a boolean maybe? – Dom Slee Commented Aug 11, 2015 at 11:55
  • 2 Used bootstrap class hidden for the same @Arvind – tpsaitwal Commented Aug 11, 2015 at 12:13
  • 1 Tried creating ajsfiddle for the same @venkat7668 , but I cant because the hidden property from bootstrap isn't working on it anyways. – tpsaitwal Commented Aug 11, 2015 at 12:22
Add a ment  | 

4 Answers 4

Reset to default 4

Try this:

JQuery:

function functions(){       
    if($("#camt2").is(":checked")){
        $("#textpart").removeClass("hidden");
    } else {
        $("#textpart").addClass("hidden");
    }
}

I think your parent div is hidden. So you also need to make col-lg-4 div also visible. Try this :

function functions(){       
if(document.getElementById('camt2').checked)
    {
        $(".col-lg-4").removeClass("hidden");
        $("#textpart").removeClass("hidden");
    }
    else{
    $("#textpart").addClass("hidden");
    }
}

Hope this helps.

hi i want to suggest that if you already uses the jquery then why we need to making class and manipulating that..?

you can use .show() and .hide() for that you should try.

function functions(){       
    if($("#cam2").is(":checked")){
        $("#textpart").show();
    } else {
        $("#textpart").hide();
    }
}

I copy your html and js codes and it is working for me. Well I had to remove the hidden class on div.col-lg-4.radio to show the elements. But the function functions is working well for me. Is displaying any js error on your console?

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745062765a282800.html

jqueryHow to display a textbox onclick of a radiobutton which is checked using javascriptStack Overflow

最新回复(0)