Button value changes via JS

Question

Sorry but I'm quite a noob if it comes to Javascript with HTML. I'm trying to make a button that will change the value of it when a multiple checkboxes are checked.

Example: If one checkbox is checked = Button: Delete 1 row If two checkboxes are checked = Button: Delete 2 rows etc.

And I want this to happen automaticly when I check all checkboxes. The only problem is that I don't know how to call the value of it in a button.

JS:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $('input[type="checkbox"]').click( function() {
        $("input[type=submit]").val("Delete "+$('input:checkbox:checked').length+" rows"); 
    });
</script>

HTML:

<input type="submit" name="submit" class="btn btn-success"  value="Verwijder" />

The server-side of this(PHP) does work(deleting the rows). Thank you for helping and your time!

I first had onclick, the only thing was that onclick is after and what I want is the value. — RezaM
– RezaM, Commented Mar 1, 2014 at 13:33
I should note that you can't name a function checked() as it is a boolean value. Consider naming it isChecked() — Spedwards
– Spedwards, Commented Mar 1, 2014 at 13:38

Hari hara prasad · Accepted Answer · 2014-03-01 13:38:13Z

2

you can change the value of a button by using this function

function change(val)
{
document.getElementById(12345).value=val;
}

while creating button give an id to it like id="12345".....

answered Mar 1, 2014 at 13:38

Hari hara prasad

3131 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Spedwards · Accepted Answer · 2014-03-01 13:32:07Z

1

You can simply do this listening to the click event of the checkboxes and applying the value by getting the length of $('input:checkbox:checked')

jsfiddle: http://jsfiddle.net/spedwards/Ls8sp/

$('input[type="checkbox"]').click( function() {
   $("input[type=submit]").val("Delete "+$('input:checkbox:checked').length+" rows"); 
});

answered Mar 1, 2014 at 13:32

Spedwards

4,51016 gold badges60 silver badges120 bronze badges

3 Comments

RezaM Over a year ago

I've tried to do this but nothing will change. Thank you for giving a JS Fiddle but nothing won't work. I've changed the orginal post to see what I now have. Thank you for helping so far.

Spedwards Over a year ago

@RezaM Are you sure your button has the input type of 'submit'? Are you using a button or an input?

RezaM Over a year ago

A button, <input type="submit" name="submit" class="btn btn-success" value="Verwijder" />

bashleigh · Accepted Answer · 2014-03-01 13:30:04Z

0

With jQuery you can change the value of the element within your script.

$('input[type="checkbox"]').click(function(){
    if($(this).attr('checked')===true){
        i++;
    }
    else{
        i--;
    }
    $('input[type="submit"]').val("Delete "+i);
});

answered Mar 1, 2014 at 13:30

bashleigh

9,4145 gold badges33 silver badges50 bronze badges

5 Comments

RezaM Over a year ago

And what needs to be the value of the input button? Thank you for helping.

bashleigh Over a year ago

Whatever you want. It will be changed afterwards using .val(). Use a string rather than a function return.

Spedwards Over a year ago

You shouldn't use attr() as it will get the value it loaded as. Instead, use prop(). See prop() vs attr(): stackoverflow.com/questions/5874652/prop-vs-attr

bashleigh Over a year ago

@Spedwards oh ok. Never seen that before.

RezaM Over a year ago

He won't change it, check the orginal post for the update. Thanks for helping so far.

pooler · Accepted Answer · 2014-03-01 13:33:21Z

0

$('input[type="checkbox"]').on("click","input[type=checkbox]",function()
{
   $("input[type=submit]").val("Delete "+$('input:checkbox:checked').length+" rows"); 
});

edited Mar 1, 2014 at 13:33

answered Mar 1, 2014 at 13:27

pooler

3373 silver badges12 bronze badges

4 Comments

RezaM Over a year ago

And what needs to be the value of the input button? Thank you for helping.

pooler Over a year ago

Spedwards - no problem ... I changed it ... but why you post the same solution ??? I'm getting angry

Spedwards Over a year ago

@pooler I just posted my solution. It was a revision of yours.

pooler Over a year ago

I think .. $(document).on() .. is not so big problem as you meantioned .. you just give me vote down and "steal my solution"

mathieu · Accepted Answer · 2014-03-01 14:46:40Z

What about something like this

HTML

<form>
    <ul>    
        <li><input type="checkbox" />item one</li>
        <li><input type="checkbox" />item two</li>
        <li><input type="checkbox" />item three</li>
        <li><input type="checkbox" />item four</li>
        <li><input type="checkbox" />item five</li>
        <li><input type="checkbox" />item six</li>
        <li><input type="checkbox" />item seven</li>
        <li><input type="checkbox" />item eight</li>
        <li><input type="checkbox" />item nine</li>
        <li><input type="checkbox" />item ten</li>
    </ul>
    <input type="submit" value="Delete (0)" />
</form>

jQuery

var getChecked = function($form) {
    return $form.find('input[type="checkbox"]:checked');
};

$form = $('form').on('submit', function(e) {
    e.preventDefault();
    getChecked($form).each(function() {
        $(this).parent().remove();
    });
});

$form.find('input[type="checkbox"]').on('change', function(e) {
    $form.find('input[type="submit"]').val('Delete (' + getChecked($form).length + ')');
});

see live fiddle

Collectives™ on Stack Overflow

Button value changes via JS

5 Answers 5

Comments

3 Comments

5 Comments

4 Comments

HTML

jQuery

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

5 Comments

4 Comments

HTML

jQuery

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related