Checkbox show img

I'm trying to make it so, when you checked/uncheck a checkbox, the img appears/disappears. As of now, when I checked a box, all 4 of the images appear instead of just the one. Also I was wondering is it wrong to use document.ready multiple times? This is what I have:

  Js:
    $(document).ready
    (
    function() 
    {
        $("#pump").hide();
        $("input:checkbox").change(function() {
         this.checked?$("#pump").show():$("#pump").hide();
        });
    });

    $(document).ready
    (
    function() 
    {
        $("#ski").hide();
        $("input:checkbox").change(function() {
         this.checked?$("#ski").show():$("#ski").hide();
        });
    });

    $(document).ready
    (
    function() 
    {
        $("#ship").hide();
        $("input:checkbox").change(function() {
         this.checked?$("#ship").show():$("#ship").hide();
        });
    });

    $(document).ready
    (
    function() 
    {
        $("#sun").hide();
        $("input:checkbox").change(function(){
         this.checked?$("#sun").show():$("#sun").hide();
        });
    });

                                 Html:
                                <div>
                <input type="checkbox"></input>
                <label> Pumpkins </label>
                <img src="images/pumpkins.jpg" id="pump">

                <input type="checkbox"></input>
                <label> Ski Resort </label>
                <img src="images/ski resort.jpg" id="ski">

                <input type="checkbox"></input>
                <label> Bahamas </label>
                <img src="images/bahamas.jpg" id="sun">

                <input type="checkbox"></input>
                <label> Cruise </label>
                <img src="images/cruise.jpg" id="ship">

            </div>

How to change the text of a checkbox in JavaScipt?

Note: Willing to use jQuery, whatever is easier.

I have a form which when submitted, creates a checkbox input. The text of the checkbox should be equal to that of another text input when the form is submitted.

The checkbox is created as expected when I submit the form but it is blank and doesn't contain the text from the corresponding text area.

For a checkbox i'm not sure if I should be using .text, .innerhtml, .val etc and the previous questions I saw on here seemed unnecessarily complicated.

HTML:

<div id="listContainer">
    <form id="listForm">
        <input type="submit" value="Add">
        <input id="listInput" class="textarea" placeholder="Add your list item here, then click submit.">
        <div id="checkboxContainer">
        </div>
    </form>

</div>

JS:

//ADD LIST ITEM
$("#listForm").submit(function(ev) {
    ev.preventDefault();
    if ($("#listInput").val() == "") {
        alert("Please enter the item name, then click 'Add'.");
    } else {
        listCount++;
        var input = $("#listInput").val();

        console.log("List Count: " + listCount);
        console.log(input);

        var cb = document.createElement('input');
        cb.id = 'input' + listCount;
        cb.type = 'checkbox';
        document.getElementById("checkboxContainer").appendChild(cb);


        $("#input" + listCount).text(input);

        //Store the list count
        localStorage.setItem("listCount", listCount);

        //Store the list title
        localStorage.setItem("input" + listCount, input); //"Note " + noteCount + ": " + 

        this.submit();
    }
});

asp:GridView unbound template field checkbox clearing

A strange thing is going on here. I had gotten the functionally of my page working the way I wanted it to but had some layout issues that were not what I really wanted. So in trying to fix these issues I found it easier to build a new master page rather than use the default Site.master page. Something, which I had gotten fairly close to finding what was forcing one of my textboxes way more narrow than I wanted it. By building the new master page I alleviated that issue. BUT I introduced a behavioral issue in my code at the same time.

Once I had the page looking the way I wanted it, I found that I had a problem with the asp:GridView on the page. I had created a column in the GridView which was based on an unbound Checkbox feature sitting in a template field.

<asp:TemplateField HeaderText="Tag" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
    <asp:CheckBox runat="server" ID="TagRowChkBx" />
</ItemTemplate>
</asp:TemplateField>

Prior to doing the new custom master page to fix the layout issue, these checkboxes would maintain their checks until they were manually unchecked. After introducing the new master page the 'checks' go away after a selection is used. These checkboxes I read to determine what rows I want to affect a change on in bulk.

I would like to get the functionally back to remaining checked until the user chooses to uncheck them.

Here is the code that causes them to be unchecked in bulk (unintended consequence of the master page change):

protected void EditSelctedBtn_Click(object sender, EventArgs e)
{
    //Read the column select drop down List into Local Varriables 
    String SelectedColumnItem = ColumnSelectDDL.SelectedItem.ToString();
    String SelectedColumnValue = ColumnSelectDDL.SelectedValue.ToString();

    // Caputre the checked rows to List
    List<int> EditRows = new List<int>();
    List<string> recordnumber = new List<string>();
    foreach (GridViewRow grv in ActVulListGV.Rows)
    {
        if (((CheckBox)grv.FindControl("TagRowChkBx")).Checked == true)
        {
            //get current row rowindex if  checkbox  in it is checked 
            EditRows.Add(grv.RowIndex);
            //get the record number (RecID)
            recordnumber.Add(grv.Cells[2].Text.ToString());
        }
    }

// Place the List in an array 
int[] ERows = EditRows.ToArray();

// Check the DDL values to make sure that the user has made a selection Warn if not.    
     if (ColumnSelectDDL.SelectedValue == "Choose Column To Edit")
    {
        UserMessageLbl.ForeColor = System.Drawing.Color.Red;
        UserMessageLbl.Font.Bold = true;

        UserMessageLbl.Text = " *** You must choose a column to edit! ***";
    mpePopUp.Show();
    }
else
    {
// If Ticket # was selected enable Ticket # Panel
if (ColumnSelectDDL.SelectedValue.ToString() == "TicketNumber")
    {
        EditTicketNumPnl.Visible = true;
        EditTicketClosedPnl.Visible = false;
        EditNotesPnl.Visible = false;
        EditExceptionIDPnl.Visible = false;
        TicketNumFocusTbx.Text = "No Reference Data";
    }
    // If Ticket Closed was selected enable Ticket Closed Panel
    else if (ColumnSelectDDL.SelectedValue.ToString() == "TicketClosed")
    {
        EditTicketNumPnl.Visible = false;
        EditTicketClosedPnl.Visible = true;
        EditNotesPnl.Visible = false;
        EditExceptionIDPnl.Visible = false;
        TicketCldFocusTbx.Text = "";
    }
    // If Notes was selected enable Notes Panel
    else if (ColumnSelectDDL.SelectedValue.ToString() == "Notes")
    {
        EditTicketNumPnl.Visible = false;
        EditTicketClosedPnl.Visible = false;
        EditNotesPnl.Visible = true;
        EditExceptionIDPnl.Visible = false;
        NotesFocusTbx.Text = "No Reference Data";
    }
    // If Exception ID was selected enable Exception ID Panel
    else if(ColumnSelectDDL.SelectedValue.ToString() == "Exception_ID")
    {
        EditTicketNumPnl.Visible = false;
        EditTicketClosedPnl.Visible = false;
        EditNotesPnl.Visible = false;
        EditExceptionIDPnl.Visible = true;
        ExceptionIDFocusTbx.Text = "No Reference Data";
    }
    // format the popup and it's buttons
    EditColMsgLbl.Font.Bold = true;
    SelectedRowsMsgLbl.Font.Bold = true;

    ColEditPnlExt.Show();
    EditColLbl.Text = SelectedColumnItem;

    SelectedRowsLbl.Text = "";
    String divider = "";
    int ticks = 0;

    foreach (string record in recordnumber)
    {
        if (ticks > 0)
            {
                divider = ", ";
                ++ticks;
            }
        else
            {
                ++ticks;
            }
            SelectedRowsLbl.Text += divider.ToString() + record;
        }

    }
}

Thoughts?

AngularJS - How to display dates in ng-repeat

I am working on a app that tracks activity by day. This is why I need to display particular number of checkboxes with dates next to them. I have starting date and would like it to increase with every checkbox. So when starting date is 26 April, I should have 27April next to second checkbox, 28 next to third etc. I have created a service that fetches data (it gets the list from localStorage), new items can be added using a form as well, where starting date and number of checkoboxes should be chosen. What is the best way to increase the date that stands next to checkboxes? For now my template looks like this:

<div class="to-check" ng-repeat="n in item.daysArray track by $index">
    <label><b></b></label>
    <input ng-change="$ctrl.refreshItem(item,$index)" ng-model="item.daysArray[$index]" type="checkbox">
 </div>

I would like to have date where is now. This is how the component for that template looks like:

    controller: ['ListService', function (ListService) {
        this.listService = ListService;
        var list = localStorage.getItem('list');
        if (list != null && list.length >= 0) {
            var obj = JSON.parse(list);
            for (var i = 0; i < obj.length; i++) {
                obj[i].startDate = new Date(obj[i].startDate);
            }
            //console.log(obj);
            this.listService.saveList(obj);
        }
        this.addItem = function (newItem) {
            var item = {
                name: newItem.name,
                startDate: new Date(newItem.startDate),
                days: newItem.days,
                daysCompleted: 0
            };
            this.listService.addItem(item);
            this.save();
        };

        this.list = ListService.getList();
        this.refreshItem = function (item, index) {
            if (item.daysArray[index]) {
                item.daysCompleted++;
                this.save();
            } else {
                item.daysCompleted--;
                this.save();
            }

        };
        this.save = function () {
            var currentList = ListService.getList();
            localStorage.setItem('list', JSON.stringify(currentList));
        }

    }
]

If you would like to understand what I am looking for, here is app demo http://ift.tt/2plHkir. In the Demo section I would like to have checkboxes with dates instead only checkboxes. Hope it's clear :)

How use RadioButton and checkboxGroup to create a graph R shiny

First, I start on R shiny, so I am interested in all your advice or explanations. In my project I want to create plot with several filters. I have data from several years and from several countries. For this I would like to use radionButton and checkboxGroup so that the user can select a country and a year for example and thus have the graph that uses only the data having its two parameters.

I have long search in forums and video to help me but I block

Here is what I have done, the Ui is good for me but I do not know how to program this in the server.

A big thanks in advance

  Ui :
  library(shiny)
  shinyUI(fluidPage(


titlePanel("test"),

sidebarLayout(
  sidebarPanel(
  h3("Filtering data"),
  selectInput("dataset","Choose a dataset (or a subset) :", 
              choices = c("Age","sex")),
  selectInput("Xvar", "X variable", 
              choices = c("weight","density")),
  selectInput("Yvar", "Y variable", 
              choices = c("hold","lenght")),
  checkboxGroupInput("Year", "Select the year:",
                     choices = list("All Years","2017","2016","2015","2014")),

  radioButtons("Country", label = ("select the country"),
               choices = list("Netherlands", "USA","Romania","India")) 
),

mainPanel(
  tabsetPanel(
    tabPanel(h6("Version"),h2("Boxplot"), plotOutput("boxPlot"))

        )
      )
  ))


  R : 
  library(shiny)
  # Other useful packages
  library(datasets)
  library(rpart)
  library(party)
  library(fpc)

  # Define colors
  palette(c("#E73032", "#377EB8", "#4DAF4A", "#984EA3",
      "#FF7F00", "#FFDD33", "#A65628", "#F781BF", "#999999"))



  # Define server logic 
  shinyServer(function(input, output, session) {

    datasetInput <- reactive({
      switch(input$dataset,
       "Age" = subset(test2, test2$character == "Age"),
       "Sex" = subset(test2, test2$character == "Sex")
      )
    })


    myColors <- reactive({
      df_test2 <- datasetInput()
      switch(input$dataset,

       "Age" = palette()[1],
       "Sex" = palette()[2],
               })

     # BOX PLOT
    output$boxPlot <- renderPlot({
      df_test2 <- datasetInput()

      boxplot(df_test2[,c(input$Xvar)] ~ df_test2[,c(input$Yvar)] , xlab =       input$Yvar, ylab = input$Xvar
        , border = "black", col = myColors())

    })  
  #CheckBox Group
    output$data <- renderTable({
      df_test2 <- datasetInput()
      df_test2[, c("Year", input$Year)]  
    })
  })

Angular 2 Filtering Checkbox

First of all, I'm very new to web development so my apologies for this (probably) easy question. I've created a django website but I want to decouple the front-end with Angular 2. I've created an API in Django and I can successfully get the data into Angular. Now I want to create a filters with checkboxes.

I have an array like this:

"id": 1, family": "blabla", group": "blabla", some other specific fields related to id1

"id": 2, family": "blabla", group": "blabla", some other specific fields related to id2

Each family or group can have different values so I would like to create checkboxes for them and filter on that. If I select multiple checkboxes, the data would show up, including the specific fields.

I could find examples for Angular1 but not really for Angular 2. Can someone share an example how they have done it?

Many thanks!

simple ajax for transform three variable when the checkbox is selected in codeigniter

I need to send three variables with values through ajax where my checkbox is selected in codeigniter. How it possible, I searched a lot for this.