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, Mar 01 '14 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, Mar 01 '14 at 13:38

score 2 · Answer 1 · answered Mar 01 '14 at 13:38

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 01 '14 at 13:38

Hari hara prasad

313
1
14

score 1 · Answer 2 · answered Mar 01 '14 at 13:32

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 01 '14 at 13:32

Spedwards

4,167
16
49
106

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. – RezaM Mar 01 '14 at 13:54
@RezaM Are you sure your button has the input type of 'submit'? Are you using a button or an input? – Spedwards Mar 01 '14 at 14:01
A button, – RezaM Mar 01 '14 at 14:03

pooler · Answer 3 · 2014-03-01T13:33:21.313

0

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

edited Mar 01 '14 at 13:33

answered Mar 01 '14 at 13:27

pooler

327
3
12

And what needs to be the value of the input button? Thank you for helping. – RezaM Mar 01 '14 at 13:33
Spedwards - no problem ... I changed it ... but why you post the same solution ??? I'm getting angry – pooler Mar 01 '14 at 13:34
@pooler I just posted my solution. It was a revision of yours. – Spedwards Mar 01 '14 at 13:37
I think .. $(document).on() .. is not so big problem as you meantioned .. you just give me vote down and "steal my solution" – pooler Mar 01 '14 at 13:39

score 0 · Answer 4 · answered Mar 01 '14 at 13:30

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 01 '14 at 13:30

bashleigh

8,813
5
29
49

And what needs to be the value of the input button? Thank you for helping. – RezaM Mar 01 '14 at 13:32
Whatever you want. It will be changed afterwards using `.val()`. Use a string rather than a function return. – bashleigh Mar 01 '14 at 13:33
1

You shouldn't use `attr()` as it will get the value it loaded as. Instead, use `prop()`. See prop() vs attr(): http://stackoverflow.com/questions/5874652/prop-vs-attr – Spedwards Mar 01 '14 at 13:40
@Spedwards oh ok. Never seen that before. – bashleigh Mar 01 '14 at 13:43
He won't change it, check the orginal post for the update. Thanks for helping so far. – RezaM Mar 01 '14 at 13:52

score 0 · Answer 5 · answered Mar 01 '14 at 14:46

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

Button value changes via JS

5 Answers5

HTML

jQuery