Js and css conflict issue?-CodePudding

I'm using the button from https://www.codeply.com/go/bp/K3nDDRQGRd, but it doesn't look like there.

I think saved changes conflicts with css. How can I prevent this?

Beside that I can't choose both an option from the top button and an option from the bottom button. I would be very glad if you can help me because of the js or css conflicts.

@Html.Label("Status")
              </br>
              <div  data-toggle="buttons">
                  <label >
                      <input type="radio"  name="options" value="1"> 1
                  </label>
                  <label >
                      <input type="radio"  name="options" value="0" checked=""> 0
                  </label>
              </div>
              </br>

@Html.Label("Anasayfada görünsün mü?")
              </br>
              <div  data-toggle="buttons">
                  <label >
                      <input type="radio"  name="options" value="True"> True
                  </label>
                  <label >
                      <input type="radio"  name="options" value="False" checked=""> False
                  </label>
              </div>


              <div >
                  <button  onclick="Tabloyaekle()">Save changes</button>
                  <button type="button"  data-dismiss="modal">Close</button>


              </div>

Second question I want to send True False value to database. Should I send something else instead of value?

CodePudding user response：

If you are using bootstrap then you don't need to use any extra js and css

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Button Group</title>
  </head>
  <body>
  Status<br />
    <div  data-toggle="buttons">
  <label >
    <input type="radio" name="options" id="option1" autocomplete="off" checked> 1
  </label>
  <label >
    <input type="radio" name="options" id="option2" autocomplete="off"> 0
  </label>
  </div>
  <br /><br />
  Anasayfada görünsün mü?<br />
  
  <div  data-toggle="buttons">
  <label >
    <input type="radio" name="options" id="option1" autocomplete="off" checked> True
  </label>
  <label >
    <input type="radio" name="options" id="option2" autocomplete="off"> False
  </label>
  
</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>