Check a checkbox on link click using value from data-attribute (possible on change clash?)

jquery get data attribute value
html data attribute jquery
jquery get all attributes
jquery prop(disabled)
jquery add attribute disabled
jquery prop checked not working
jquery get attribute value
jquery set checkbox checked

I have the following jQuery code which has a link and a checkbox.

When the edit link is clicked it gets the data attribute on the link and checks the checkbox accordingly.

I also need the functionality to change the value of the checkbox if it is checked or unchecked by the user. So on change it's value gets amended to 1 or 0.

Issue

if I uncheck the box, the value becomes 0 as expected but then if I click the link again the checkbox remains unchecked.

How To Replicate

See the jsFiddle

  1. Click the link
  2. Uncheck the checkbox
  3. Click the link again

I am expecting the checkbox to be checked as per the if( changecheckboxvalto == 1 ) condition.

Code

$('body').on('click', '#edit', function() {

  // Get the change checkbox val

  changecheckboxvalto = $(this).attr('data-changecheckboxvalto');
  console.log('changecheckboxvalto = ' + changecheckboxvalto);

  if( changecheckboxvalto == 1 ) {

    $('#myinput').val(1).attr('checked', true);

  } else {

    $('#myinput').val(0).attr('checked', false);

  }

  // click checkbox makes chekbox value change to 1 or 0

  $('#myinput').change(function() {
    console.log('change happened');
    if( $(this).val() == 0 ) {
      $(this).val(1).attr('checked', true);
      console.log('change condition 1');
    } else {
      $(this).val(0).attr('checked', false);
      console.log('change condition 2');
    }
  });

});

Well, this would be it:

if( changecheckboxvalto == 1 ) {

    $('#myinput').val(1).attr('checked', true);

} else {

    $('#myinput').val(0).attr('checked', false);

}

When changecheckboxvalto == 1, it sets the value to 1. Otherwise, it is set to 0. The .val(0) part will never activate as it is always 1. Also, the attribute is set on #edit, but you are changing it on #myinput. Set to this:

if( changecheckboxvalto == 1 ) {

    $('#edit').attr('data-changecheckboxvalto', 0);
    $('#myinput').attr('checked', true);

} else {

    $('#edit').attr('data-changecheckboxvalto', 1);
    $('#myinput').attr('checked', false);

}

.attr(), To safely set values on DOM objects without memory leaks, use .data() . Examples: Display the checked attribute and property of a checkbox as it changes. To respond to CheckBox clicks. In the Click event handler, use the Checked property to determine the control's state, and perform any necessary action. Private Sub CheckBox1_Click (ByVal sender As Object, ByVal e As System.EventArgs) Handles CheckBox1.Click ' The CheckBox control's Text property is changed each time the ' control is clicked, indicating a checked or unchecked state.

you have to use the 'prop' function .

change $('#myinput').val(1).attr('checked', true); to $('#myinput').val(1).prop('checked', true); and $('#myinput').val(0).attr('checked', false); to $('#myinput').val(0).prop('checked', false);

.prop(), The .prop() method gets the property value for only the first element in the matched set. The checked attribute value does not change with the state of the checkbox, To safely set values on DOM objects without memory leaks, use .​data() . In the updateTotal function, a reference to the form containing the checkboxes is obtained through the this keyword, as is the value of the checkbox clicked. Since the values of form elements are always strings, the parseFloat function is used to convert the current value of the total text box to a floating point number. Then the checkbox's

If you want the link to only push the checkbox one way and not the other (always make it true, or always make it false), then here is a solution :

// Get the link
var link = $('#edit');

// Get the checkbox
var checkbox = $('#myinput');


// Add an onclick to the link

link.on('click', function () {

    // Get the value of the link attribute 'data-changecheckboxvalto'
    var pushedValue = link.attr('data-changecheckboxvalto');

    // Change the attribute checked accordingly
    checkbox.prop('checked', pushedValue);
    // NB : for jQuery < 1.6, use "checkbox.attr('checked', pushedValue);"

});

Same thing in pure JS

// Get the link
var link = document.querySelector('#edit');

// Get the checkbox
var checkbox = document.querySelector('#myinput');


// Add an onclick to the link

link.onclick = function () {

    // Get the value of changecheckboxvalto
    var pushedValue = link.dataset.changecheckboxvalto;

    // Change the value of the checkbox checked attribute
    checkbox.checked = pushedValue;

};

If on the other hand you are trying to make the link and the checkbox 'twins', then you can get rid of data-changecheckboxvalto and do one of the following :

Here is a solution using jQuery

// Get the link
var link = $('#edit');

// Get the checkbox
var checkbox = $('#myinput');


// Add an onclick to the link

link.on('click', function () {

    // Get the value of the checkbox attribute 'checked'
    var checkboxState = checkbox.prop('checked');
    // NB : for jQuery < 1.6, use "checkbox.attr('checked');"

    // Inverse the value of the attribute checked
    checkbox.prop('checked', !checkboxState);
    // NB : for jQuery < 1.6, use "checkbox.attr('checked', !checkboxState);"

});

Same thing in pure JS

// Get the link
var link = document.querySelector('#edit');

// Get the checkbox
var checkbox = document.querySelector('#myinput');


// Add an onclick to the link

link.onclick = function () {

    // Inverse the value of the attribute checked
    checkbox.checked = !checkbox.checked;

}

Let me know :)

HTML Standard, setAttribute ( 'href' , 'https://example.com/' ); // change the content attribute directly in a small iframe and then convinces the user to click, for instance by having the While it is possible to use presentational markup in a way that provides users label >< input type = checkbox checked name = cheese disabled > Cheese  How to filtering HTML5 data-attribute elements via checkboxes using JQuery (checkbox values) it is missing some criteria and displaying unconditional data

HTML5 Custom Data Attributes (data-*), Attribute Value: The attribute value can be any string. Imagine that when a user clicks on a vegetable a new layer opens up in the Prefixing the custom attributes with data- ensures that they will be As data attributes become more widely used, the potential for clashes in naming vs change data-* to Y. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

[PDF] What is jQuery Mobile?, While we'd like to think that this book will cover every single possible topic you would need for all Update the HTML to make use of the data attributes that jQuery tested our websites on mobile devices to see how well they work, right​?) a>), it will automatically capture any clicks on that link and change it to an AJAX-. METHOD on_link_click. * * Get the value of the checkbox and set the value accordingly * Refersh the table FIELD-SYMBOLS: <lfs_data> LIKE LINE OF lo_report->gt_kna1. READ TABLE lo_report->gt_kna1 ASSIGNING <lfs_data> INDEX row. CHECK sy-subrc IS INITIAL.

PR-HTML40-971107 HTML 4.0 Specification W3C Proposed , Associating header information with data cells 2. Categorizing cells 3. The list of characters A. Changes between HTML 3.2 and HTML 4.0 1. Changes to Retrieve online information via hypertext links, at the click of a button. * Design forms for The type of the attribute's value or an explicit set of possible values. Values  The ValidationRule and ValidationText properties don't apply to check box, option button, or toggle button controls when they are in an option group. They apply only to the option group itself. They apply only to the option group itself.

Comments
  • Hi, you probably need to carefully read this api.jquery.com/prop
  • Well, the checkbox gets its value changed to 0 upon unchecking. If I click the link after this I would expect changecheckboxvalto to still be 1 and therefore the checkbox gets checked, but it doesn't. So I don't see how that helps...? The else condition there is just to test if I manually change the data-attribute to 0 - the console log even states it is 1.
  • Hold on...found a solution!
  • @bigdaveygeorge I updated it with the correct solution.
  • The data-changecheckboxvalto is always 1, it doesn't need to be changed.
  • @bigdaveygeorge If it's always 1, why would it need to exist? Why not just replace it with 1 == 1?