javascript - Store checkbox values in JSON with true or false - Stack Overflow

admin管理员组

文章数量:1357577

I'm getting the values of checkboxes when a user submits the form and storing their values as an array, so the form looks like this:

<!-- gym_create.html - I have removed the other inputs in the form for brevity -->

<form class="create-gym" role="form">
  <input type="checkbox" name="gymTags" value="Bodybuilding" id="tagBodybuilding" class="tag-checkbox"/>
  <input type="checkbox" name="gymTags" value="Powerlifting" id="tagPowerlifting" class="tag-checkbox"/>
  <button type="submit" class="btn create-form-submit">Save gym</button>
</form>

And then I collect that information in my JS file associated with the form:

// gym_create.js - I have removed the other values I collect apart from the gymName value for brevity

Template.gymCreate.events({
  "submit .create-gym": function (e) {

    e.preventDefault();

    var tagOutput = JSON.stringify({
    tagOutput: $(':checkbox[name=gymTags]:checked').map(function() {
        return $(this).val();
      }).get()
    });

    // Collect values from form when submitted
    var gymDetails = {
      gymName: $(e.target).find('[name=gymName]').val(),
      gymTags: tagOutput,
    }

    // Call method here
  }
});

I can then output these in my template using {{gymDetails.gymTags}} but this produces the following in the browser:

"{"TAGOUTPUT":["BODYBUILDING","POWERLIFTING"]}"

What I want is a way to store the values as JSON so they are like so:

{"gymTags": {
  "bodybuilding": "true",
  "powerlifting": "false"
}}

So that I can output each tag on it's own and also access only tags which are 'true' (that were checked) later on.

Does anyone know how I go about this? I wrangled with it all yesterday and the best I could e up with was the =JSON.stringify

I don't want to pass the entire form to JSON, just the checkboxes, is JSON.stringify what I want to be doing or am I barking up the wrong tree.

I'm getting the values of checkboxes when a user submits the form and storing their values as an array, so the form looks like this:

<!-- gym_create.html - I have removed the other inputs in the form for brevity -->

<form class="create-gym" role="form">
  <input type="checkbox" name="gymTags" value="Bodybuilding" id="tagBodybuilding" class="tag-checkbox"/>
  <input type="checkbox" name="gymTags" value="Powerlifting" id="tagPowerlifting" class="tag-checkbox"/>
  <button type="submit" class="btn create-form-submit">Save gym</button>
</form>

And then I collect that information in my JS file associated with the form:

// gym_create.js - I have removed the other values I collect apart from the gymName value for brevity

Template.gymCreate.events({
  "submit .create-gym": function (e) {

    e.preventDefault();

    var tagOutput = JSON.stringify({
    tagOutput: $(':checkbox[name=gymTags]:checked').map(function() {
        return $(this).val();
      }).get()
    });

    // Collect values from form when submitted
    var gymDetails = {
      gymName: $(e.target).find('[name=gymName]').val(),
      gymTags: tagOutput,
    }

    // Call method here
  }
});

I can then output these in my template using {{gymDetails.gymTags}} but this produces the following in the browser:

"{"TAGOUTPUT":["BODYBUILDING","POWERLIFTING"]}"

What I want is a way to store the values as JSON so they are like so:

{"gymTags": {
  "bodybuilding": "true",
  "powerlifting": "false"
}}

So that I can output each tag on it's own and also access only tags which are 'true' (that were checked) later on.

Does anyone know how I go about this? I wrangled with it all yesterday and the best I could e up with was the =JSON.stringify

I don't want to pass the entire form to JSON, just the checkboxes, is JSON.stringify what I want to be doing or am I barking up the wrong tree.

• javascript
• jquery
• json
• meteor

Share Improve this question Follow asked Feb 27, 2015 at 14:15 Jon KyteJon Kyte 2,02033 gold badges2828 silver badges4141 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I think this should do it. You were just returning the just the value of the inputs. You want to return a json object, where the value is the "index" and the checked property is the "value" of the object.

var tagOutput = JSON.stringify({
    tagOutput: $(':checkbox[name=gymTags]').map(function() {
        var op = {};
        op[this.value] = this.checked;
        return op;
    }).get()
});

Edit: as noted by Da Rod, to use both checked and unchecked checkboxes, you must remove the ":checked" selector.

Since your selector is only grabbing items that are checked, they are all "true". That being the case, you need to change the way you are using "map" to add properties to tagOutput.

var tagOutput = {}
$(':checkbox[name=gymTags]').map(function() {
        tagOutput[this.value] = this.checked;
    })
});

本文标签： javascriptStore checkbox values in JSON with true or falseStack Overflow